// "Sperren" — admin-only screen for managing the website-side block list.
// Shows every blocked submitter, lets the admin add a new one by identifier
// or revoke an existing block.

function BlocksScreen({ me, dark }) {
  const [blocks, setBlocks] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [adding, setAdding] = React.useState(false);

  // Form state for the manual "add block" entry.
  const [formId, setFormId] = React.useState('');
  const [formName, setFormName] = React.useState('');
  const [formReason, setFormReason] = React.useState('');

  const refresh = React.useCallback(async () => {
    try {
      const list = await Api.blocks.list();
      setBlocks(list);
    } catch (e) {
      toast.error('Sperrliste laden fehlgeschlagen: ' + e.message);
    } finally {
      setLoading(false);
    }
  }, []);

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

  if (me.group !== 'admin') {
    return (
      <div style={{ padding: '60px 32px', maxWidth: 600, margin: '0 auto' }}>
        <ApGlass dark={dark} radius={20} padding={36} style={{ textAlign: 'center', opacity: 0.7 }}>
          <ApIcon name="shield" size={32} color="#fbbf24"/>
          <h2 style={{ fontSize: 20, fontWeight: 800, margin: '12px 0 6px' }}>Nur Admins</h2>
          <p style={{ fontSize: 13, opacity: 0.7, margin: 0 }}>
            Diese Seite ist Admins vorbehalten.
          </p>
        </ApGlass>
      </div>
    );
  }

  const handleAdd = async (e) => {
    e.preventDefault();
    const id = formId.trim().toLowerCase();
    if (!/^[a-f0-9]{16,64}$/.test(id)) {
      toast.error('Identifier muss 16–64 Hex-Zeichen sein, ohne „license:"-Prefix.');
      return;
    }
    setAdding(true);
    try {
      await Api.blocks.add(id, formReason.trim() || null, formName.trim() || null);
      toast.success('Spieler gesperrt.');
      setFormId(''); setFormName(''); setFormReason('');
      await refresh();
    } catch (ex) {
      toast.error('Sperren fehlgeschlagen: ' + ex.message);
    } finally {
      setAdding(false);
    }
  };

  const handleRemove = async (identifier, name) => {
    if (!confirm(`Sperre für ${name || identifier} aufheben?`)) return;
    try {
      await Api.blocks.remove(identifier);
      toast.info('Sperre aufgehoben.');
      await refresh();
    } catch (e) {
      toast.error('Aufheben fehlgeschlagen: ' + e.message);
    }
  };

  return (
    <div style={{ padding: '28px 32px', maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 12, opacity: 0.55, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>
          {blocks.length} {blocks.length === 1 ? 'gesperrter Spieler' : 'gesperrte Spieler'}
        </div>
        <h1 style={{ fontSize: 32, fontWeight: 800, letterSpacing: -0.7, margin: 0 }}>Sperren</h1>
        <p style={{ fontSize: 14, opacity: 0.6, marginTop: 6, maxWidth: 620 }}>
          Diese Spieler können hier keine Tracks hochladen. Unabhängig von FiveM-Bans —
          auf dem Server spielen sie weiter, nur das Hochladen ist gesperrt.
        </p>
      </div>

      <ApGlass dark={dark} radius={20} padding={20} style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>
          Spieler manuell sperren
        </div>
        <form onSubmit={handleAdd} style={{ display: 'grid', gridTemplateColumns: '2fr 2fr 3fr auto', gap: 10, alignItems: 'start' }}>
          <input
            value={formId}
            onChange={e => setFormId(e.target.value)}
            placeholder="Identifier (Hex, ohne license:)"
            spellCheck={false}
            style={{ ...inputStyle(dark), fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 13 }}
          />
          <input
            value={formName}
            onChange={e => setFormName(e.target.value)}
            placeholder="Spielername (optional)"
            maxLength={80}
            style={inputStyle(dark)}
          />
          <input
            value={formReason}
            onChange={e => setFormReason(e.target.value)}
            placeholder="Grund (optional)"
            maxLength={500}
            style={inputStyle(dark)}
          />
          <button
            type="submit"
            disabled={adding || !formId.trim()}
            style={{
              padding: '10px 18px', borderRadius: 10, border: 'none', cursor: 'pointer',
              background: formId.trim() && !adding ? 'linear-gradient(135deg, #ff4d8d, #7c3aed)' : (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'),
              color: '#fff', fontSize: 13, fontWeight: 700,
              opacity: formId.trim() && !adding ? 1 : 0.5,
            }}
          >
            {adding ? '…' : 'Sperren'}
          </button>
        </form>
      </ApGlass>

      {loading ? (
        <ApGlass dark={dark} radius={20} padding={36} style={{ textAlign: 'center', opacity: 0.5 }}>
          Lade Sperrliste…
        </ApGlass>
      ) : blocks.length === 0 ? (
        <ApGlass dark={dark} radius={20} padding={36} style={{ textAlign: 'center' }}>
          <ApIcon name="check" size={28} color="#34d399"/>
          <div style={{ fontSize: 14, fontWeight: 700, marginTop: 10 }}>Niemand gesperrt</div>
          <div style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>Alle Spieler dürfen aktuell hochladen.</div>
        </ApGlass>
      ) : (
        <ApGlass dark={dark} radius={20} padding={6}>
          {blocks.map((b, i) => {
            const blocker = playerByIdent(b.blockedBy);
            return (
              <div key={b.identifier} style={{
                display: 'flex', alignItems: 'center', gap: 14, padding: '14px 14px', borderRadius: 14,
                borderBottom: i < blocks.length - 1 ? (dark ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.04)') : 'none',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%', flexShrink: 0,
                  background: 'rgba(239,68,68,0.18)',
                  border: '1px solid rgba(239,68,68,0.45)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <ApIcon name="shield" size={18} color="#f87171"/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span>{b.playerName || 'Unbekannter Spieler'}</span>
                    <span style={{ fontSize: 11, opacity: 0.5, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{b.identifier}</span>
                  </div>
                  <div style={{ fontSize: 12, opacity: 0.6, marginTop: 3, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span>{timeAgo(b.blockedAt)}</span>
                    {blocker && (
                      <>
                        <span style={{ opacity: 0.4 }}>·</span>
                        <span>von <ApPlayerName player={blocker} size={12} opacity={1}/></span>
                      </>
                    )}
                    {b.reason && (
                      <>
                        <span style={{ opacity: 0.4 }}>·</span>
                        <span style={{ fontStyle: 'italic' }}>„{b.reason}"</span>
                      </>
                    )}
                  </div>
                </div>
                <button
                  onClick={() => handleRemove(b.identifier, b.playerName)}
                  style={{
                    padding: '8px 14px', borderRadius: 10, cursor: 'pointer',
                    background: 'rgba(52,211,153,0.14)', color: '#34d399',
                    border: '1px solid rgba(52,211,153,0.45)',
                    fontSize: 12.5, fontWeight: 700,
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}
                >
                  <ApIcon name="check" size={14}/> Aufheben
                </button>
              </div>
            );
          })}
        </ApGlass>
      )}
    </div>
  );
}

// Reused from submit.jsx — same look, kept inline so this file is standalone.
function inputStyle(dark) {
  return {
    width: '100%', padding: '10px 12px', borderRadius: 10,
    background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.7)',
    border: dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.08)',
    color: 'inherit', fontSize: 13, fontFamily: 'inherit', outline: 'none',
  };
}

window.BlocksScreen = BlocksScreen;