// ScreensAdmin.jsx — Admin & Moderator Panel

// ─── Hauptcontainer mit Navigation ───────────────────────────
function ScreenAdmin({ authUser, role = 'admin' }) {
  const isAdmin = role === 'admin';
  const [view, setView] = React.useState('menu');

  if (view === 'menu')  return <AdminMenuView role={role} onNav={setView} authUser={authUser}/>;
  if (view === 'users') return <AdminUsersView authUser={authUser} onBack={() => setView('menu')}/>;
  if (view === 'rsvps') return <AdminRsvpsView role={role} onBack={isAdmin ? () => setView('menu') : null}/>;
  return null;
}

// ─── Menü-Übersicht (nur Admin) ───────────────────────────────
function AdminMenuView({ role, onNav, authUser }) {
  const token = sessionStorage.getItem('sbp_token');
  const [pendingCount, setPendingCount] = React.useState(0);

  React.useEffect(() => {
    sbpApi('GET', '/users/pending', null, token)
      .then(d => setPendingCount(d.length)).catch(() => {});
  }, []);

  const menuItems = [
    {
      id: 'users',
      icon: <IconUser size={28}/>,
      label: 'Benutzer & Anfragen',
      desc: 'Mitglieder verwalten, Anfragen freigeben oder ablehnen',
      badge: pendingCount > 0 ? pendingCount : null,
      badgeColor: 'var(--sbp-blood-400)',
      accent: 'var(--sbp-blood-400)',
      accentBg: 'color-mix(in oklab, var(--sbp-blood-500) 20%, transparent)',
      accentBdr: 'color-mix(in oklab, var(--sbp-blood-400) 35%, transparent)',
    },
    {
      id: 'rsvps',
      icon: <IconThumbUp size={28}/>,
      label: 'Zusagen & Absagen',
      desc: 'Übersicht aller Rückmeldungen zu den Terminen',
      badge: null,
      accent: '#22c55e',
      accentBg: 'color-mix(in oklab, #22c55e 12%, transparent)',
      accentBdr: 'color-mix(in oklab, #22c55e 30%, transparent)',
    },
  ];

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Admin"
        subtitle="Verwaltung"
        leading={
          <div style={{ width: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sbp-blood-400)' }}>
            <IconShield size={20}/>
          </div>
        }
      />

      {/* Info-Banner */}
      <div style={{
        margin: '16px 20px 0', padding: '12px 16px', borderRadius: 12,
        background: 'color-mix(in oklab, var(--sbp-blood-500) 18%, transparent)',
        border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 35%, transparent)',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <span style={{ color: 'var(--sbp-blood-400)', flexShrink: 0 }}><IconShield size={18}/></span>
        <div>
          <div className="sbp-body" style={{ fontSize: 13, fontWeight: 600 }}>Angemeldet als {authUser?.username}</div>
          <div className="sbp-meta" style={{ marginTop: 2, textTransform: 'none', letterSpacing: 0 }}>
            Rolle: {role === 'admin' ? 'Administrator' : 'Moderator'}
          </div>
        </div>
      </div>

      {/* Menü-Karten */}
      <div style={{ padding: '20px 20px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div className="sbp-eyebrow" style={{ marginBottom: 4 }}>Bereiche</div>
        {menuItems.map(item => (
          <button key={item.id} onClick={() => onNav(item.id)} style={{
            width: '100%', textAlign: 'left', cursor: 'pointer',
            background: `linear-gradient(135deg, ${item.accentBg}, transparent)`,
            border: `1px solid ${item.accentBdr}`,
            borderRadius: 16, padding: '20px 20px',
            display: 'flex', alignItems: 'center', gap: 16,
            position: 'relative', overflow: 'hidden',
            boxShadow: `0 4px 20px color-mix(in oklab, ${item.accent} 8%, transparent)`,
            color: 'var(--sbp-text)',
          }}>
            {/* Glow-Blob */}
            <div style={{
              position: 'absolute', right: -20, top: -20, width: 100, height: 100, borderRadius: '50%',
              background: `radial-gradient(circle, color-mix(in oklab, ${item.accent} 15%, transparent), transparent 70%)`,
              pointerEvents: 'none',
            }}/>
            {/* Icon */}
            <div style={{
              width: 54, height: 54, borderRadius: 14, flexShrink: 0,
              background: `color-mix(in oklab, ${item.accent} 15%, transparent)`,
              border: `1px solid color-mix(in oklab, ${item.accent} 35%, transparent)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: item.accent,
            }}>
              {item.icon}
            </div>
            {/* Text */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span className="sbp-h3" style={{ fontSize: 16, fontFamily: 'var(--sbp-font-rustic)' }}>{item.label}</span>
                {item.badge && (
                  <span style={{
                    minWidth: 20, height: 20, padding: '0 6px', borderRadius: 99,
                    background: item.badgeColor, color: '#fff',
                    fontSize: 10, fontWeight: 700, letterSpacing: 0,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: `0 0 8px color-mix(in oklab, ${item.badgeColor} 70%, transparent)`,
                  }}>{item.badge}</span>
                )}
              </div>
              <div className="sbp-meta" style={{ textTransform: 'none', letterSpacing: 0, lineHeight: 1.4, color: 'var(--sbp-text-2)' }}>
                {item.desc}
              </div>
            </div>
            <div style={{ color: 'var(--sbp-text-3)', flexShrink: 0 }}>
              <IconChevronRight size={18}/>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

// ─── Benutzer & Anfragen (bisherige Admin-Ansicht) ────────────
function AdminUsersView({ authUser, onBack }) {
  const [tab, setTab]                     = React.useState('all');
  const [users, setUsers]                 = React.useState([]);
  const [loading, setLoading]             = React.useState(true);
  const [error, setError]                 = React.useState('');
  const [busy, setBusy]                   = React.useState(null);
  const [confirmAction, setConfirmAction] = React.useState(null);
  const [showAddUser, setShowAddUser]     = React.useState(false);
  const [editUser, setEditUser]           = React.useState(null);
  const [pendingCount, setPendingCount]   = React.useState(0);

  const token = sessionStorage.getItem('sbp_token');

  const loadPendingCount = async () => {
    try {
      const data = await sbpApi('GET', '/users/pending', null, token);
      setPendingCount(data.length);
    } catch (_) {}
  };

  const loadUsers = async () => {
    setLoading(true); setError('');
    try {
      const data = await sbpApi('GET', tab === 'pending' ? '/users/pending' : '/users', null, token);
      setUsers(data);
      if (tab === 'pending') setPendingCount(data.length);
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  };

  React.useEffect(() => { loadPendingCount(); }, []);
  React.useEffect(() => { loadUsers(); }, [tab]);

  const handleConfirmed = async () => {
    const { type, id } = confirmAction;
    setConfirmAction(null);
    setBusy(id + '-' + type);
    try {
      if (type === 'approve') await sbpApi('POST', `/users/${id}/approve`, null, token);
      else await sbpApi('DELETE', `/users/${id}`, null, token);
      await loadUsers();
    } catch (err) { setError(err.message); }
    finally { setBusy(null); }
  };

  const roleBadge = (role) => {
    const map = {
      admin:     { label: 'Admin',     color: 'var(--sbp-blood-400)' },
      moderator: { label: 'Moderator', color: 'var(--sbp-accent)' },
      user:      { label: 'Mitglied',  color: 'var(--sbp-text-3)' },
    };
    const r = map[role] || map.user;
    return (
      <span style={{
        fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
        padding: '2px 8px', borderRadius: 20,
        background: `color-mix(in oklab, ${r.color} 18%, transparent)`,
        border: `1px solid color-mix(in oklab, ${r.color} 40%, transparent)`,
        color: r.color,
      }}>{r.label}</span>
    );
  };

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Benutzer & Anfragen"
        subtitle="Mitgliederverwaltung"
        leading={
          <button onClick={onBack} className="sbp-icon-btn" style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
        trailing={
          <div style={{ display: 'flex', gap: 4 }}>
            <button onClick={() => setShowAddUser(true)} className="sbp-icon-btn"
                    style={{ width: 36, height: 36, color: 'var(--sbp-ember-200)' }} title="Benutzer anlegen">
              <IconPlus size={18}/>
            </button>
            <button onClick={loadUsers} className="sbp-icon-btn" style={{ width: 36, height: 36 }} title="Neu laden">
              <IconRefresh size={16}/>
            </button>
          </div>
        }
      />

      {/* Tab-Switcher */}
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          background: 'rgba(0,0,0,0.4)', border: '1px solid var(--sbp-border)',
          borderRadius: 10, padding: 4,
        }}>
          {[['all', 'Alle User'], ['pending', 'Ausstehend']].map(([v, l]) => (
            <button key={v} onClick={() => setTab(v)} style={{
              padding: '8px 0', borderRadius: 8, border: 0, cursor: 'pointer',
              fontFamily: 'var(--sbp-font-display)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', fontWeight: 600,
              color: tab === v ? 'var(--sbp-fog-100)' : 'var(--sbp-text-3)',
              background: tab === v ? 'color-mix(in oklab, var(--sbp-blood-500) 30%, transparent)' : 'transparent',
              boxShadow: tab === v ? 'inset 0 0 0 1px color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)' : 'none',
              position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              {l}
              {v === 'pending' && pendingCount > 0 && (
                <span style={{
                  minWidth: 18, height: 18, padding: '0 5px', borderRadius: 99,
                  background: 'var(--sbp-blood-400)', color: '#fff',
                  fontSize: 10, fontWeight: 700, letterSpacing: 0,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 8px color-mix(in oklab, var(--sbp-blood-400) 70%, transparent)',
                }}>{pendingCount}</span>
              )}
            </button>
          ))}
        </div>
      </div>

      {error && (
        <div style={{
          margin: '12px 20px 0', padding: '10px 14px', borderRadius: 10,
          background: 'color-mix(in oklab, var(--sbp-blood-500) 25%, transparent)',
          border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)',
          color: 'var(--sbp-ember-100)', fontSize: 13,
        }}>{error}</div>
      )}

      <div style={{ padding: '14px 20px 0' }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--sbp-text-3)' }}>
            <div className="sbp-meta">Lade Daten…</div>
          </div>
        ) : users.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <p className="sbp-body" style={{ color: 'var(--sbp-text-3)' }}>
              {tab === 'pending' ? 'Keine ausstehenden Anträge.' : 'Keine User gefunden.'}
            </p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {users.map(u => (
              <UserCard
                key={u.id} u={u} tab={tab}
                isSelf={u.id === authUser?.id}
                busy={busy} roleBadge={roleBadge}
                onApprove={() => setConfirmAction({ type: 'approve', id: u.id, username: u.username })}
                onReject={() => setConfirmAction({ type: 'reject', id: u.id, username: u.username })}
                onDelete={() => setConfirmAction({ type: 'delete', id: u.id, username: u.username })}
                onEdit={() => setEditUser(u)}
              />
            ))}
          </div>
        )}
      </div>

      {confirmAction && <AdminConfirmModal action={confirmAction} onCancel={() => setConfirmAction(null)} onConfirm={handleConfirmed}/>}
      {showAddUser && <AddUserSheet token={token} onCancel={() => setShowAddUser(false)} onSave={() => { setShowAddUser(false); loadUsers(); }}/>}
      {editUser && <EditUserSheet user={editUser} token={token} onCancel={() => setEditUser(null)} onSave={() => { setEditUser(null); loadUsers(); }}/>}
    </div>
  );
}

// ─── Zusagen & Absagen Übersicht ──────────────────────────────
function AdminRsvpsView({ role, onBack }) {
  const token = sessionStorage.getItem('sbp_token');
  const [groups, setGroups] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [expanded, setExpanded] = React.useState({});
  const MONTH_SHORT = ['Jän','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];

  const load = async () => {
    setLoading(true);
    try {
      const data = await sbpApi('GET', '/rsvps', null, token);
      setGroups(data);
    } catch (_) {}
    finally { setLoading(false); }
  };

  React.useEffect(() => { load(); }, []);

  const toggleExpand = (id) => setExpanded(prev => ({ ...prev, [id]: !prev[id] }));

  const fmtDate = (dateStr) => {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    return `${d.getUTCDate()}. ${MONTH_SHORT[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
  };

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Zusagen & Absagen"
        subtitle="Rückmeldungen der Mitglieder"
        leading={
          onBack ? (
            <button onClick={onBack} className="sbp-icon-btn" style={{ width: 36, height: 36 }}>
              <IconChevronLeft size={20}/>
            </button>
          ) : (
            <div style={{ width: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#22c55e' }}>
              <IconThumbUp size={20}/>
            </div>
          )
        }
        trailing={
          <button onClick={load} className="sbp-icon-btn" style={{ width: 36, height: 36 }} title="Neu laden">
            <IconRefresh size={16}/>
          </button>
        }
      />

      <div style={{ padding: '14px 20px 0' }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--sbp-text-3)' }}>
            <div className="sbp-meta">Lade Rückmeldungen…</div>
          </div>
        ) : groups.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '60px 20px' }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%', margin: '0 auto 16px',
              background: 'color-mix(in oklab, #22c55e 10%, transparent)',
              border: '1px solid color-mix(in oklab, #22c55e 25%, transparent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80',
            }}><IconThumbUp size={26}/></div>
            <p className="sbp-body" style={{ color: 'var(--sbp-text-3)' }}>Noch keine Rückmeldungen vorhanden.</p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {groups.map(g => {
              const isOpen = !!expanded[g.event_id];
              const total = g.zusagen.length + g.absagen.length;
              return (
                <div key={g.event_id} className="sbp-card" style={{ overflow: 'hidden', padding: 0 }}>
                  {/* Event-Header — klickbar zum Aufklappen */}
                  <button onClick={() => toggleExpand(g.event_id)} style={{
                    width: '100%', padding: '14px 16px', background: 'none', border: 0,
                    cursor: 'pointer', textAlign: 'left', color: 'var(--sbp-text)',
                    display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    {/* Datum-Box */}
                    <div style={{
                      width: 48, minWidth: 48, height: 56, borderRadius: 10,
                      background: 'linear-gradient(180deg, color-mix(in oklab, var(--sbp-accent) 25%, transparent), transparent)',
                      border: '1px solid var(--sbp-border-strong)',
                      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                    }}>
                      {(() => {
                        const d = new Date(g.event_date);
                        return <>
                          <span className="sbp-meta" style={{ fontSize: 9, color: 'var(--sbp-ember-200)' }}>
                            {MONTH_SHORT[d.getUTCMonth()]}
                          </span>
                          <span style={{ fontSize: 20, fontWeight: 700, lineHeight: 1, fontFamily: 'var(--sbp-font-rustic)' }}>
                            {d.getUTCDate()}
                          </span>
                          <span className="sbp-meta" style={{ fontSize: 9 }}>{d.getUTCFullYear()}</span>
                        </>;
                      })()}
                    </div>
                    {/* Info */}
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="sbp-h3" style={{ fontSize: 14, marginBottom: 6 }}>{g.event_title}</div>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <span style={{
                          display: 'inline-flex', alignItems: 'center', gap: 4,
                          fontSize: 12, fontWeight: 700, padding: '3px 8px', borderRadius: 20,
                          background: 'color-mix(in oklab, #22c55e 15%, transparent)',
                          border: '1px solid color-mix(in oklab, #22c55e 35%, transparent)',
                          color: '#4ade80',
                        }}>
                          <IconThumbUp size={11}/>{g.zusagen.length} Zusagen
                        </span>
                        <span style={{
                          display: 'inline-flex', alignItems: 'center', gap: 4,
                          fontSize: 12, fontWeight: 700, padding: '3px 8px', borderRadius: 20,
                          background: 'color-mix(in oklab, var(--sbp-blood-500) 18%, transparent)',
                          border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 35%, transparent)',
                          color: 'var(--sbp-blood-400)',
                        }}>
                          <IconThumbDown size={11}/>{g.absagen.length} Absagen
                        </span>
                      </div>
                    </div>
                    <div style={{
                      color: 'var(--sbp-text-3)', transition: 'transform 0.2s',
                      transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                    }}>
                      <IconChevronRight size={16}/>
                    </div>
                  </button>

                  {/* Aufgeklappte Details */}
                  {isOpen && (
                    <div style={{ borderTop: '1px solid var(--sbp-border)', padding: '12px 16px 14px' }}>
                      {g.zusagen.length > 0 && (
                        <>
                          <div className="sbp-eyebrow" style={{ marginBottom: 8, color: '#4ade80' }}>
                            Zusagen ({g.zusagen.length})
                          </div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
                            {g.zusagen.map(u => (
                              <div key={u.id} style={{
                                display: 'flex', alignItems: 'center', gap: 10,
                                padding: '8px 12px', borderRadius: 8,
                                background: 'color-mix(in oklab, #22c55e 8%, transparent)',
                                border: '1px solid color-mix(in oklab, #22c55e 20%, transparent)',
                              }}>
                                <div style={{
                                  width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                                  background: 'color-mix(in oklab, #22c55e 20%, transparent)',
                                  border: '1px solid color-mix(in oklab, #22c55e 40%, transparent)',
                                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                                  fontFamily: 'var(--sbp-font-rustic)', fontSize: 12, fontWeight: 700, color: '#4ade80',
                                }}>
                                  {u.username.substring(0, 2).toUpperCase()}
                                </div>
                                <span className="sbp-body" style={{ fontSize: 13, fontWeight: 600 }}>{u.username}</span>
                              </div>
                            ))}
                          </div>
                        </>
                      )}
                      {g.absagen.length > 0 && (
                        <>
                          <div className="sbp-eyebrow" style={{ marginBottom: 8, color: 'var(--sbp-blood-400)' }}>
                            Absagen ({g.absagen.length})
                          </div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                            {g.absagen.map(u => (
                              <div key={u.id} style={{
                                display: 'flex', alignItems: 'center', gap: 10,
                                padding: '8px 12px', borderRadius: 8,
                                background: 'color-mix(in oklab, var(--sbp-blood-500) 12%, transparent)',
                                border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 25%, transparent)',
                              }}>
                                <div style={{
                                  width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                                  background: 'color-mix(in oklab, var(--sbp-blood-500) 25%, transparent)',
                                  border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 40%, transparent)',
                                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                                  fontFamily: 'var(--sbp-font-rustic)', fontSize: 12, fontWeight: 700,
                                  color: 'var(--sbp-blood-400)',
                                }}>
                                  {u.username.substring(0, 2).toUpperCase()}
                                </div>
                                <span className="sbp-body" style={{ fontSize: 13, fontWeight: 600 }}>{u.username}</span>
                              </div>
                            ))}
                          </div>
                        </>
                      )}
                      {total === 0 && (
                        <p className="sbp-meta" style={{ textAlign: 'center', padding: '10px 0', textTransform: 'none', letterSpacing: 0 }}>
                          Noch keine Rückmeldungen für diesen Termin.
                        </p>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Bestätigungs-Modal ───────────────────────────────────────
function AdminConfirmModal({ action, onConfirm, onCancel }) {
  const configs = {
    approve: {
      icon: <IconCheck size={30}/>,
      iconColor: 'var(--sbp-accent)',
      title: 'Mitglied freigeben?',
      message: `Soll "${action.username}" wirklich freigegeben werden? Das Mitglied kann sich danach anmelden.`,
      confirmLabel: 'Ja, freigeben',
      confirmBg:  'color-mix(in oklab, var(--sbp-accent) 30%, transparent)',
      confirmBdr: '1px solid color-mix(in oklab, var(--sbp-accent) 50%, transparent)',
      confirmClr: 'var(--sbp-ember-100)',
    },
    reject: {
      icon: <IconTrash size={30}/>,
      iconColor: 'var(--sbp-blood-400)',
      title: 'Antrag ablehnen?',
      message: `Soll der Antrag von "${action.username}" wirklich abgelehnt und der Account gelöscht werden?`,
      confirmLabel: 'Ja, ablehnen',
      confirmBg:  'color-mix(in oklab, var(--sbp-blood-500) 30%, transparent)',
      confirmBdr: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)',
      confirmClr: 'var(--sbp-blood-400)',
    },
    delete: {
      icon: <IconTrash size={30}/>,
      iconColor: 'var(--sbp-blood-400)',
      title: 'Benutzer löschen?',
      message: `Soll "${action.username}" wirklich gelöscht werden? Diese Aktion kann nicht rückgängig gemacht werden.`,
      confirmLabel: 'Ja, löschen',
      confirmBg:  'color-mix(in oklab, var(--sbp-blood-500) 30%, transparent)',
      confirmBdr: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)',
      confirmClr: 'var(--sbp-blood-400)',
    },
  };
  const cfg = configs[action.type] || configs.delete;

  return (
    <div onClick={onCancel} style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 32px', animation: 'sbp-fade-in 0.15s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 320,
        background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))',
        borderRadius: 20, border: '1px solid var(--sbp-border-strong)',
        boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
        padding: '28px 24px 24px', textAlign: 'center',
      }}>
        <div style={{ color: cfg.iconColor, marginBottom: 14 }}>{cfg.icon}</div>
        <h3 className="sbp-h3" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 22, fontWeight: 600, marginBottom: 10 }}>{cfg.title}</h3>
        <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', fontSize: 14, lineHeight: 1.55 }}>{cfg.message}</p>
        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          <button onClick={onCancel} className="sbp-btn sbp-btn--ghost" style={{ flex: 1 }}>Nein</button>
          <button onClick={onConfirm} style={{
            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            padding: '12px 16px', borderRadius: 10, cursor: 'pointer', fontWeight: 600,
            fontFamily: 'var(--sbp-font-display)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase',
            background: cfg.confirmBg, border: cfg.confirmBdr, color: cfg.confirmClr,
          }}>
            {cfg.confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Einzelne User-Karte ──────────────────────────────────────
function UserCard({ u, tab, isSelf, busy, roleBadge, onApprove, onReject, onDelete, onEdit }) {
  const fmtDate = (s) => s ? new Date(s).toLocaleDateString('de-AT', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '—';
  const isBusy = !!(busy && busy.startsWith(u.id + '-'));

  return (
    <div className="sbp-card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{
          width: 42, height: 42, borderRadius: '50%', flexShrink: 0,
          background: u.is_approved
            ? 'linear-gradient(180deg, color-mix(in oklab, var(--sbp-accent) 30%, transparent), transparent)'
            : 'rgba(240,233,223,0.06)',
          border: '1px solid var(--sbp-border-strong)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--sbp-font-rustic)', fontSize: 18, fontWeight: 700,
          color: u.is_approved ? 'var(--sbp-ember-100)' : 'var(--sbp-text-3)',
        }}>
          {(u.username || '?').substring(0, 2).toUpperCase()}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <span className="sbp-h3" style={{ fontSize: 15 }}>{u.username}</span>
            {isSelf && <span style={{ fontSize: 10, color: 'var(--sbp-text-3)', fontFamily: 'var(--sbp-font-display)', letterSpacing: '0.14em' }}>ICH</span>}
            {roleBadge(u.role)}
            {!u.is_approved && (
              <span style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
                padding: '2px 8px', borderRadius: 20,
                background: 'color-mix(in oklab, #d97706 18%, transparent)',
                border: '1px solid color-mix(in oklab, #d97706 40%, transparent)',
                color: '#d97706',
              }}>Ausstehend</span>
            )}
          </div>
          <div className="sbp-meta" style={{ marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{u.email}</div>
          <div className="sbp-meta" style={{ marginTop: 1 }}>Registriert: {fmtDate(u.created_at)}</div>
        </div>
      </div>

      {!isSelf && (
        <div style={{ borderTop: '1px solid var(--sbp-border)', padding: '10px 16px', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {tab === 'pending' ? (
            <>
              <button onClick={onApprove} disabled={isBusy} className="sbp-btn sbp-btn--primary"
                      style={{ flex: 1, minWidth: 110, padding: '8px 12px', fontSize: 11 }}>
                <IconCheck size={14}/>Freigeben
              </button>
              <button onClick={onReject} disabled={isBusy} style={{
                flex: 1, minWidth: 110, padding: '8px 12px', borderRadius: 8, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                fontFamily: 'var(--sbp-font-display)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 600,
                background: 'color-mix(in oklab, var(--sbp-blood-500) 15%, transparent)',
                border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 40%, transparent)',
                color: 'var(--sbp-blood-400)', opacity: isBusy ? 0.5 : 1,
              }}>
                <IconTrash size={14}/>Ablehnen
              </button>
            </>
          ) : (
            <>
              <button onClick={onEdit} disabled={isBusy} className="sbp-btn sbp-btn--ghost"
                      style={{ flex: 1, minWidth: 110, padding: '8px 12px', fontSize: 11 }}>
                <IconEdit size={14}/>Bearbeiten
              </button>
              <button onClick={onDelete} disabled={isBusy} style={{
                padding: '8px 14px', borderRadius: 8,
                border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 40%, transparent)',
                background: 'color-mix(in oklab, var(--sbp-blood-500) 15%, transparent)',
                color: 'var(--sbp-blood-400)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 6,
                fontFamily: 'var(--sbp-font-display)', fontSize: 11, letterSpacing: '0.14em',
                opacity: isBusy ? 0.5 : 1,
              }}>
                <IconTrash size={14}/>
              </button>
            </>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Benutzer anlegen Sheet ───────────────────────────────────
function AddUserSheet({ token, onCancel, onSave }) {
  const [f, setF] = React.useState({ username: '', email: '', password: '', role: 'user' });
  const [saving, setSaving] = React.useState(false);
  const [error, setError]   = React.useState('');
  const set = (k) => (e) => setF(prev => ({ ...prev, [k]: e.target.value }));

  const submit = async () => {
    if (!f.username.trim() || !f.email.trim() || !f.password) {
      setError('Alle Pflichtfelder ausfüllen.'); return;
    }
    if (f.password.length < 8) {
      setError('Passwort muss mindestens 8 Zeichen haben.'); return;
    }
    setSaving(true); setError('');
    try {
      await sbpApi('POST', '/users', f, token);
      onSave();
    } catch (err) {
      setError(err.message);
      setSaving(false);
    }
  };

  return (
    <div onClick={onCancel} style={{
      position: 'absolute', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'flex-end', animation: 'sbp-fade-in 0.2s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxHeight: '92%',
        background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid var(--sbp-border-strong)', borderBottom: 0,
        boxShadow: '0 -20px 60px rgba(0,0,0,0.5)',
        overflow: 'auto', padding: '8px 22px 28px', animation: 'sbp-fade-in 0.3s ease',
      }}>
        <div style={{ width: 40, height: 4, background: 'var(--sbp-fog-500)', borderRadius: 2, margin: '8px auto 18px' }}/>
        <span className="sbp-eyebrow">Neues Mitglied</span>
        <h2 className="sbp-h2" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 26, fontWeight: 600, marginTop: 6, marginBottom: 18 }}>Benutzer anlegen</h2>

        {error && (
          <div style={{
            padding: '8px 12px', borderRadius: 8, marginBottom: 14, fontSize: 13,
            background: 'color-mix(in oklab, var(--sbp-blood-500) 25%, transparent)',
            border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 40%, transparent)',
            color: 'var(--sbp-ember-100)',
          }}>{error}</div>
        )}

        <label className="sbp-label">Benutzername *</label>
        <input className="sbp-input" placeholder="z. B. Max Mustermann" value={f.username} onChange={set('username')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>E-Mail *</label>
        <input className="sbp-input" type="email" placeholder="name@beispiel.at" value={f.email} onChange={set('email')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>Passwort *</label>
        <input className="sbp-input" type="password" placeholder="Mindestens 8 Zeichen" value={f.password} onChange={set('password')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>Rolle</label>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
          {[['user', 'Mitglied'], ['moderator', 'Moderator'], ['admin', 'Admin']].map(([r, l]) => (
            <button key={r} onClick={() => setF(p => ({ ...p, role: r }))} className="sbp-chip" style={{
              cursor: 'pointer',
              background: f.role === r ? 'color-mix(in oklab, var(--sbp-accent) 25%, transparent)' : undefined,
              borderColor: f.role === r ? 'color-mix(in oklab, var(--sbp-accent) 50%, transparent)' : undefined,
              color: f.role === r ? 'var(--sbp-ember-100)' : undefined,
            }}>{l}</button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          <button onClick={onCancel} className="sbp-btn sbp-btn--ghost" style={{ flex: 1 }}>Abbrechen</button>
          <button onClick={submit} disabled={saving} className="sbp-btn sbp-btn--primary" style={{ flex: 2 }}>
            <IconCheck size={16}/>{saving ? 'Speichern…' : 'Anlegen'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Benutzer bearbeiten Sheet ────────────────────────────────
function EditUserSheet({ user, token, onCancel, onSave }) {
  const [f, setF] = React.useState({
    username: user.username || '',
    email:    user.email    || '',
    password: '',
    role:     user.role     || 'user',
  });
  const [saving, setSaving] = React.useState(false);
  const [error, setError]   = React.useState('');
  const set = (k) => (e) => setF(prev => ({ ...prev, [k]: e.target.value }));

  const submit = async () => {
    if (!f.username.trim() || !f.email.trim()) {
      setError('Benutzername und E-Mail sind erforderlich.'); return;
    }
    if (f.password && f.password.length < 8) {
      setError('Passwort muss mindestens 8 Zeichen haben.'); return;
    }
    setSaving(true); setError('');
    try {
      await sbpApi('PUT', `/users/${user.id}`, f, token);
      onSave();
    } catch (err) {
      setError(err.message);
      setSaving(false);
    }
  };

  return (
    <div onClick={onCancel} style={{
      position: 'absolute', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'flex-end', animation: 'sbp-fade-in 0.2s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxHeight: '92%',
        background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid var(--sbp-border-strong)', borderBottom: 0,
        boxShadow: '0 -20px 60px rgba(0,0,0,0.5)',
        overflow: 'auto', padding: '8px 22px 28px', animation: 'sbp-fade-in 0.3s ease',
      }}>
        <div style={{ width: 40, height: 4, background: 'var(--sbp-fog-500)', borderRadius: 2, margin: '8px auto 18px' }}/>
        <span className="sbp-eyebrow">Benutzer bearbeiten</span>
        <h2 className="sbp-h2" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 26, fontWeight: 600, marginTop: 6, marginBottom: 18 }}>{user.username} bearbeiten</h2>

        {error && (
          <div style={{
            padding: '8px 12px', borderRadius: 8, marginBottom: 14, fontSize: 13,
            background: 'color-mix(in oklab, var(--sbp-blood-500) 25%, transparent)',
            border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 40%, transparent)',
            color: 'var(--sbp-ember-100)',
          }}>{error}</div>
        )}

        <label className="sbp-label">Benutzername *</label>
        <input className="sbp-input" value={f.username} onChange={set('username')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>E-Mail *</label>
        <input className="sbp-input" type="email" value={f.email} onChange={set('email')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>
          Neues Passwort
          <span style={{ color: 'var(--sbp-text-3)', fontWeight: 400, marginLeft: 6, textTransform: 'none', letterSpacing: 0 }}>(leer lassen = unverändert)</span>
        </label>
        <input className="sbp-input" type="password" placeholder="Leer lassen = Passwort behalten" value={f.password} onChange={set('password')}/>

        <label className="sbp-label" style={{ marginTop: 14 }}>Rolle</label>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
          {[['user', 'Mitglied'], ['moderator', 'Moderator'], ['admin', 'Admin']].map(([r, l]) => (
            <button key={r} onClick={() => setF(p => ({ ...p, role: r }))} className="sbp-chip" style={{
              cursor: 'pointer',
              background: f.role === r ? 'color-mix(in oklab, var(--sbp-accent) 25%, transparent)' : undefined,
              borderColor: f.role === r ? 'color-mix(in oklab, var(--sbp-accent) 50%, transparent)' : undefined,
              color: f.role === r ? 'var(--sbp-ember-100)' : undefined,
            }}>{l}</button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          <button onClick={onCancel} className="sbp-btn sbp-btn--ghost" style={{ flex: 1 }}>Abbrechen</button>
          <button onClick={submit} disabled={saving} className="sbp-btn sbp-btn--primary" style={{ flex: 2 }}>
            <IconCheck size={16}/>{saving ? 'Speichern…' : 'Änderungen speichern'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenAdmin });