// Admin page — pending access requests + user management
// Only rendered if window.APP_USER.is_admin is true.

function AdminPage() {
  const u = window.APP_USER || {};
  if (!u.is_admin) {
    return (
      <div className="fade-in" style={{ padding: '60px 40px', maxWidth: 600, margin: '0 auto' }}>
        <Surface><EmptyState icon="✕" title="גישה מוגבלת" sub="אזור הניהול זמין למנהלים בלבד." /></Surface>
      </div>
    );
  }

  const [tab, setTab] = useState('requests'); // requests | users
  const [requests, setRequests] = useState([]);
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [editingUser, setEditingUser] = useState(null);

  const reload = async () => {
    setLoading(true);
    try {
      const [r1, r2] = await Promise.all([
        apiFetch('/api/admin/access_requests?status=pending').then(r => r.json()),
        apiFetch('/api/admin/users').then(r => r.json()),
      ]);
      setRequests(r1);
      setUsers(r2);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { reload(); }, []);

  const pendingCount = requests.filter(r => r.status === 'pending').length;

  return (
    <div className="fade-in" style={{ padding: '32px 40px 60px', maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22 }}>
        <div>
          <h1 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 4px' }}>
            ניהול
          </h1>
          <div style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>
            ניהול משתמשים ובקשות גישה
          </div>
        </div>
        <button onClick={() => setShowCreate(true)} style={{
          background: 'var(--ink)', color: 'var(--bg)', border: 'none', padding: '8px 14px',
          borderRadius: 10, fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
        }}>+ צור משתמש</button>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 16, borderBottom: '0.5px solid var(--rule)' }}>
        <AdminTab on={tab === 'requests'} onClick={() => setTab('requests')}
          label={`בקשות גישה`} count={pendingCount} />
        <AdminTab on={tab === 'users'} onClick={() => setTab('users')}
          label="משתמשים" count={users.length} />
      </div>

      {loading ? (
        <Surface><EmptyState icon="⌛" title="טוען…" /></Surface>
      ) : tab === 'requests' ? (
        <RequestsList requests={requests} onAction={reload} />
      ) : (
        <UsersList users={users} onEdit={setEditingUser} onAction={reload} currentUserId={u.id} />
      )}

      {showCreate && <CreateUserModal onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); reload(); }} />}
      {editingUser && <EditUserModal user={editingUser} onClose={() => setEditingUser(null)} onSaved={() => { setEditingUser(null); reload(); }} currentUserId={u.id} />}
    </div>
  );
}

function AdminTab({ on, onClick, label, count }) {
  return (
    <button onClick={onClick} style={{
      padding: '10px 18px', border: 'none', background: 'transparent',
      borderBottom: on ? '2px solid var(--ink)' : '2px solid transparent',
      color: on ? 'var(--ink)' : 'var(--ink-soft)',
      fontSize: 13, fontWeight: on ? 600 : 500, cursor: 'pointer',
      marginBottom: -1, fontFamily: 'inherit',
    }}>
      {label}
      {count > 0 && (
        <span className="tnum" style={{
          marginInlineStart: 8, fontSize: 10.5, padding: '2px 7px', borderRadius: 99,
          background: on ? 'var(--ink)' : 'var(--bg-deep)',
          color: on ? 'var(--bg)' : 'var(--ink-soft)',
          fontWeight: 600,
        }}>{count}</span>
      )}
    </button>
  );
}

function RequestsList({ requests, onAction }) {
  const [busy, setBusy] = useState(null);
  const [tempPasswords, setTempPasswords] = useState({}); // { request_id: password }

  const approve = async (r) => {
    if (!confirm(`לאשר גישה ל-${r.email}? סיסמה זמנית תיווצר ותוצג לך פעם אחת.`)) return;
    setBusy(r.id);
    try {
      const resp = await apiFetch(`/api/admin/access_requests/${r.id}/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });
      if (!resp.ok) throw new Error((await resp.json()).detail || 'אישור נכשל');
      const data = await resp.json();
      setTempPasswords(prev => ({ ...prev, [r.id]: data.temporary_password }));
      // Don't immediately refresh — keep showing the temp password until user dismisses
    } catch (err) {
      alert('שגיאה: ' + err.message);
      setBusy(null);
    }
  };

  const deny = async (r) => {
    if (!confirm(`לדחות את הבקשה של ${r.email}?`)) return;
    setBusy(r.id);
    try {
      const resp = await apiFetch(`/api/admin/access_requests/${r.id}/deny`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });
      if (!resp.ok) throw new Error('דחייה נכשלה');
      onAction();
    } catch (err) {
      alert('שגיאה: ' + err.message);
      setBusy(null);
    }
  };

  if (requests.length === 0) {
    return <Surface><EmptyState icon="✓" title="אין בקשות ממתינות" sub="כשמישהו מבקש גישה דרך /request-access — הבקשה תופיע כאן." /></Surface>;
  }

  return (
    <Surface padded={false}>
      {requests.map((r, i) => {
        const tempPw = tempPasswords[r.id];
        return (
          <div key={r.id} style={{
            padding: '18px 22px', borderTop: i ? '0.5px solid var(--rule)' : 'none',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, background: 'var(--bg-deep)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 15, fontWeight: 600, color: 'var(--ink-2)',
              }}>{(r.name || r.email)[0].toUpperCase()}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{r.name}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)' }}>
                  {r.email}
                </div>
                {r.reason && (
                  <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.5,
                                background: 'var(--bg-deep)', padding: 10, borderRadius: 8 }}>
                    {r.reason}
                  </div>
                )}
                <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>
                  {new Date(r.created_at).toLocaleString('he-IL')} · {r.ip_address || '—'}
                </div>
              </div>
              {!tempPw && (
                <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
                  <button onClick={() => approve(r)} disabled={busy === r.id} style={{
                    padding: '7px 14px', borderRadius: 8, background: 'var(--positive)',
                    color: 'white', border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 600,
                  }}>✓ אשר</button>
                  <button onClick={() => deny(r)} disabled={busy === r.id} style={{
                    padding: '7px 14px', borderRadius: 8, background: 'transparent',
                    color: 'var(--alert)', border: '0.5px solid rgba(216,58,58,0.3)',
                    cursor: 'pointer', fontSize: 12, fontWeight: 500,
                  }}>✕ דחה</button>
                </div>
              )}
            </div>
            {tempPw && (
              <div style={{
                marginTop: 14, padding: 14, background: 'rgba(48,164,108,0.08)',
                border: '0.5px solid rgba(48,164,108,0.3)', borderRadius: 10,
              }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--positive)', marginBottom: 8 }}>
                  ✓ המשתמש נוצר. שתף את הסיסמה הזמנית עם {r.name}:
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 14, padding: '10px 14px',
                  background: 'var(--surface)', borderRadius: 6, marginBottom: 8,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <span>{tempPw}</span>
                  <button onClick={() => navigator.clipboard?.writeText(tempPw)} style={{
                    padding: '4px 10px', borderRadius: 6, background: 'var(--bg-deep)',
                    border: '0.5px solid var(--rule)', cursor: 'pointer', fontSize: 11,
                  }}>📋 העתק</button>
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                  הסיסמה תוצג רק פעם אחת. שלח אותה למשתמש ב-WhatsApp/SMS — הוא יחליף אותה אחרי הכניסה הראשונה.
                </div>
                <button onClick={() => { setTempPasswords(prev => { const c = {...prev}; delete c[r.id]; return c; }); onAction(); }} style={{
                  marginTop: 10, padding: '6px 12px', borderRadius: 7,
                  background: 'var(--ink)', color: 'var(--bg)', border: 'none',
                  cursor: 'pointer', fontSize: 12, fontWeight: 500,
                }}>הבנתי, הסר מהרשימה</button>
              </div>
            )}
          </div>
        );
      })}
    </Surface>
  );
}

function UsersList({ users, onEdit, onAction, currentUserId }) {
  return (
    <Surface padded={false}>
      {users.map((u, i) => (
        <div key={u.id} style={{
          padding: '14px 22px', display: 'flex', alignItems: 'center', gap: 14,
          borderTop: i ? '0.5px solid var(--rule)' : 'none',
          opacity: u.is_active ? 1 : 0.55,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9, background: 'var(--bg-deep)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14, fontWeight: 600, color: 'var(--ink-2)',
          }}>{(u.name || u.email)[0].toUpperCase()}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
              {u.name}
              {u.is_admin && (
                <span style={{ fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
                               background: 'rgba(10,132,255,0.12)', color: 'var(--accent)', fontWeight: 600 }}>
                  אדמין
                </span>
              )}
              {!u.is_active && (
                <span style={{ fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
                               background: 'rgba(216,58,58,0.12)', color: 'var(--alert)', fontWeight: 600 }}>
                  לא פעיל
                </span>
              )}
              {u.id === currentUserId && (
                <span style={{ fontSize: 9.5, color: 'var(--ink-soft)' }}>(אתה)</span>
              )}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)' }}>
              {u.email} · {u.active_sessions} סשנים פעילים
              {u.last_login_at && ` · נכנס ${new Date(u.last_login_at).toLocaleDateString('he-IL')}`}
            </div>
          </div>
          <button onClick={() => onEdit(u)} style={{
            padding: '5px 11px', borderRadius: 7,
            background: 'transparent', color: 'var(--ink-soft)',
            border: '0.5px solid var(--rule)', cursor: 'pointer', fontSize: 11.5,
          }}>✎ ערוך</button>
        </div>
      ))}
    </Surface>
  );
}

function CreateUserModal({ onClose, onCreated }) {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [isAdmin, setIsAdmin] = useState(false);
  const [saving, setSaving] = useState(false);
  const [tempPassword, setTempPassword] = useState(null);
  const [createdEmail, setCreatedEmail] = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      const r = await apiFetch('/api/admin/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: email.trim(),
          name: name.trim(),
          password: password.trim() || null,
          is_admin: isAdmin,
        }),
      });
      if (!r.ok) {
        const err = await r.json().catch(() => ({}));
        const msg = (typeof err.detail === 'string') ? err.detail
                  : (err.detail?.message || JSON.stringify(err.detail) || 'יצירה נכשלה');
        throw new Error(msg);
      }
      const data = await r.json();
      setTempPassword(data.temporary_password);
      setCreatedEmail(data.user.email);
    } catch (err) {
      alert('שגיאה: ' + err.message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
      zIndex: 95, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '8vh',
    }}>
      <form onClick={e => e.stopPropagation()} onSubmit={submit} className="slide-up" style={{
        width: 460, maxWidth: '90%', background: 'var(--surface)',
        borderRadius: 16, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
      }}>
        <div style={{ padding: '18px 22px', borderBottom: '0.5px solid var(--rule)', display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>יצירת משתמש חדש</span>
          <span onClick={onClose} style={{ cursor: 'pointer', color: 'var(--ink-soft)', fontSize: 16 }}>✕</span>
        </div>
        {!tempPassword ? (
          <>
            <div style={{ padding: 22 }}>
              <Field label="אימייל">
                <input value={email} onChange={e => setEmail(e.target.value)} type="email" required style={inpStyle} />
              </Field>
              <Field label="שם מלא">
                <input value={name} onChange={e => setName(e.target.value)} required style={inpStyle} />
              </Field>
              <Field label="סיסמה (אופציונלי — אם ריק, סיסמה זמנית תיווצר)">
                <input value={password} onChange={e => setPassword(e.target.value)} type="text" minLength={10} style={inpStyle} />
              </Field>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, cursor: 'pointer' }}>
                <input type="checkbox" checked={isAdmin} onChange={e => setIsAdmin(e.target.checked)} />
                הענק הרשאות אדמין
              </label>
            </div>
            <div style={{ padding: '14px 22px', borderTop: '0.5px solid var(--rule)', display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button type="button" onClick={onClose} disabled={saving} style={{ padding: '9px 14px', borderRadius: 9, background: 'var(--surface)', border: '0.5px solid var(--rule)', cursor: saving ? 'wait' : 'pointer', fontSize: 13 }}>ביטול</button>
              <button type="submit" disabled={saving} style={{ padding: '9px 18px', borderRadius: 9, background: 'var(--ink)', color: 'var(--bg)', border: 'none', cursor: saving ? 'wait' : 'pointer', fontSize: 13, fontWeight: 600 }}>
                {saving ? 'יוצר…' : 'צור'}
              </button>
            </div>
          </>
        ) : (
          <>
            <div style={{ padding: 22 }}>
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 8, color: 'var(--positive)' }}>
                ✓ המשתמש נוצר
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginBottom: 14, lineHeight: 1.5 }}>
                אימייל: <strong>{createdEmail}</strong><br />
                שתף את הסיסמה הזמנית — היא תוצג רק פעם אחת:
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 15, padding: '12px 14px',
                background: 'var(--bg-deep)', borderRadius: 8, marginBottom: 10,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span>{tempPassword}</span>
                <button onClick={() => navigator.clipboard?.writeText(tempPassword)} type="button" style={{
                  padding: '4px 10px', borderRadius: 6, background: 'var(--surface)',
                  border: '0.5px solid var(--rule)', cursor: 'pointer', fontSize: 11,
                }}>📋 העתק</button>
              </div>
            </div>
            <div style={{ padding: '14px 22px', borderTop: '0.5px solid var(--rule)', display: 'flex', justifyContent: 'flex-end' }}>
              <button type="button" onClick={onCreated} style={{
                padding: '9px 18px', borderRadius: 9, background: 'var(--ink)',
                color: 'var(--bg)', border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 600,
              }}>הבנתי, סגור</button>
            </div>
          </>
        )}
      </form>
    </div>
  );
}

function EditUserModal({ user, onClose, onSaved, currentUserId }) {
  const [name, setName] = useState(user.name);
  const [isAdmin, setIsAdmin] = useState(user.is_admin);
  const [isActive, setIsActive] = useState(user.is_active);
  const [newPw, setNewPw] = useState('');
  const [saving, setSaving] = useState(false);
  const isSelf = user.id === currentUserId;

  const save = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      const r = await apiFetch(`/api/admin/users/${user.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim() !== user.name ? name.trim() : null,
          is_admin: isAdmin !== user.is_admin ? isAdmin : null,
          is_active: isActive !== user.is_active ? isActive : null,
        }),
      });
      if (!r.ok) throw new Error((await r.json()).detail || 'שמירה נכשלה');
      onSaved();
    } catch (err) {
      alert('שגיאה: ' + err.message);
      setSaving(false);
    }
  };

  const resetPassword = async () => {
    if (!newPw || newPw.length < 10) {
      alert('סיסמה חייבת לפחות 10 תווים');
      return;
    }
    if (!confirm(`לאפס סיסמה ל-${user.email}? כל הסשנים שלו יופסקו.`)) return;
    setSaving(true);
    try {
      const r = await apiFetch(`/api/admin/users/${user.id}/set_password`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password: newPw }),
      });
      if (!r.ok) {
        // Surface the real server error: it's usually
        // "סיסמה לא יכולה להכיל את האימייל" or a similar strength rule.
        const err = await r.json().catch(() => ({}));
        const msg = (typeof err.detail === 'string') ? err.detail
                  : (err.detail?.message || JSON.stringify(err.detail) || 'איפוס נכשל');
        throw new Error(msg);
      }
      const data = await r.json().catch(() => ({}));
      alert(`הסיסמה אופסה בהצלחה.${data.sessions_revoked ? ` ${data.sessions_revoked} סשנים פעילים נותקו.` : ''}\nשלח את הסיסמה החדשה למשתמש בדיוק כמו שהזנת אותה (case-sensitive, ללא רווחים).`);
      setNewPw('');
    } catch (err) {
      alert('שגיאה: ' + err.message);
    } finally {
      setSaving(false);
    }
  };

  const revokeSessions = async () => {
    if (!confirm(`לנתק את כל הסשנים של ${user.email}?`)) return;
    setSaving(true);
    try {
      await apiFetch(`/api/admin/users/${user.id}/revoke_sessions`, {
        method: 'POST',
      });
      onSaved();
    } catch (err) {
      alert('שגיאה: ' + err.message);
      setSaving(false);
    }
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
      zIndex: 95, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '6vh',
    }}>
      <div onClick={e => e.stopPropagation()} className="slide-up" style={{
        width: 480, maxWidth: '90%', background: 'var(--surface)',
        borderRadius: 16, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
        maxHeight: '85vh', display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '18px 22px', borderBottom: '0.5px solid var(--rule)', display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>עריכת {user.name}</span>
          <span onClick={onClose} style={{ cursor: 'pointer', color: 'var(--ink-soft)', fontSize: 16 }}>✕</span>
        </div>
        <div style={{ padding: 22, overflowY: 'auto' }}>
          <form onSubmit={save}>
            <div style={{ fontSize: 11, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)', marginBottom: 12 }}>
              {user.email} · נוצר {user.created_at ? new Date(user.created_at).toLocaleDateString('he-IL') : '—'}
            </div>
            <Field label="שם תצוגה">
              <input value={name} onChange={e => setName(e.target.value)} required style={inpStyle} />
            </Field>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, marginBottom: 10, cursor: isSelf ? 'not-allowed' : 'pointer', opacity: isSelf ? 0.5 : 1 }}>
              <input type="checkbox" checked={isAdmin} onChange={e => setIsAdmin(e.target.checked)} disabled={isSelf} />
              הרשאות אדמין {isSelf && '(לא ניתן לערוך את עצמך)'}
            </label>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, marginBottom: 14, cursor: isSelf ? 'not-allowed' : 'pointer', opacity: isSelf ? 0.5 : 1 }}>
              <input type="checkbox" checked={isActive} onChange={e => setIsActive(e.target.checked)} disabled={isSelf} />
              פעיל
            </label>
            <button type="submit" disabled={saving} style={{
              padding: '8px 16px', borderRadius: 9,
              background: 'var(--ink)', color: 'var(--bg)', border: 'none',
              cursor: saving ? 'wait' : 'pointer', fontSize: 13, fontWeight: 600,
            }}>{saving ? 'שומר…' : 'שמור שינויים'}</button>
          </form>

          <div style={{ height: 0.5, background: 'var(--rule)', margin: '22px 0' }} />

          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>איפוס סיסמה</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginBottom: 12 }}>
            הגדר סיסמה חדשה. כל הסשנים של המשתמש יופסקו.
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <input value={newPw} onChange={e => setNewPw(e.target.value)} type="text" placeholder="סיסמה חדשה (10+ תווים)"
              style={{ ...inpStyle, flex: 1 }} />
            <button onClick={resetPassword} disabled={saving || !newPw} style={{
              padding: '9px 14px', borderRadius: 9,
              background: 'var(--alert)', color: 'white', border: 'none',
              cursor: 'pointer', fontSize: 12.5, fontWeight: 600,
              opacity: !newPw ? 0.4 : 1,
            }}>אפס</button>
          </div>

          <div style={{ height: 0.5, background: 'var(--rule)', margin: '22px 0' }} />

          <button onClick={revokeSessions} disabled={saving} style={{
            width: '100%', padding: '9px 14px', borderRadius: 9,
            background: 'transparent', color: 'var(--alert)',
            border: '0.5px solid rgba(216,58,58,0.3)', cursor: 'pointer',
            fontSize: 12.5, fontWeight: 500,
          }}>נתק את כל הסשנים של המשתמש</button>
        </div>
      </div>
    </div>
  );
}

window.AdminPage = AdminPage;