import {
  html, useState, useEffect, useCallback,
} from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { ask, tell } from './ask.js';
import { hubFetch } from './hub-client.js';
import { GroupName } from './group-name.js';

// ── Admin Panel ─────────────────────────────────────────────────────────────

export function AdminPage({ token, role }) {
  const [tab, setTab] = useState('general');
  const [stats, setStats] = useState(null);
  const [settings, setSettings] = useState(null);
  const [settingsSaving, setSettingsSaving] = useState(false);
  const [mailStatus, setMailStatus] = useState(null);
  // Edited values live here until Save, so a half-typed number is never sent
  // and a rejected one never looks applied.
  const [mailDraft, setMailDraft] = useState(null);
  const [loginDraft, setLoginDraft] = useState(null);
  const [sessionDraft, setSessionDraft] = useState(null);
  const [users, setUsers] = useState([]);
  const [usersTotal, setUsersTotal] = useState(0);
  const [userSearch, setUserSearch] = useState('');
  const [groups, setGroups] = useState([]);
  const [groupsTotal, setGroupsTotal] = useState(0);
  const [logs, setLogs] = useState([]);
  const [logEvent, setLogEvent] = useState('');
  const [logOffset, setLogOffset] = useState(0);
  const [blocklist, setBlocklist] = useState([]);
  const [nodes, setNodes] = useState([]);
  const [detailUser, setDetailUser] = useState(null);
  const [error, setError] = useState('');

  const headers = { Authorization: `Bearer ${token}` };

  const loadStats = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/stats', { token });
      setStats(data);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadSettings = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/settings', { token });
      setSettings(data);
      setMailDraft({ ...data.mail });
      setLoginDraft({ ...data.login });
      setSessionDraft({ ...data.session });
    } catch (e) { setError(e.message); }
    try {
      setMailStatus(await hubFetch('/v1/admin/mail', { token }));
    } catch { /* the panel still works without the live figure */ }
  }, [token]);

  const saveSettings = useCallback(async (patch) => {
    setSettingsSaving(true);
    setError('');
    try {
      // The response is the authoritative state — render that, not the
      // optimistic value, so a rejected change never looks applied.
      const data = await hubFetch('/v1/admin/settings',
        { method: 'PATCH', body: patch, token });
      setSettings(data);
      // The hub clamps what it was given, so the draft is reset from the
      // answer rather than left showing a number that was not stored.
      setMailDraft({ ...data.mail });
      setLoginDraft({ ...data.login });
      setSessionDraft({ ...data.session });
      if (patch.mail) {
        try {
          setMailStatus(await hubFetch('/v1/admin/mail', { token }));
        } catch { /* leave the previous figure rather than blanking it */ }
      }
    } catch (e) { setError(e.message); }
    finally { setSettingsSaving(false); }
  }, [token]);

  const loadUsers = useCallback(async (q = '') => {
    try {
      const data = await hubFetch(`/v1/admin/users?q=${encodeURIComponent(q)}&limit=100`, { token });
      setUsers(data.users);
      setUsersTotal(data.total);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadGroups = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/groups?limit=100', { token });
      setGroups(data.groups);
      setGroupsTotal(data.total);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadLogs = useCallback(async (event = '', offset = 0, append = false) => {
    try {
      let url = `/v1/admin/logs?limit=50&offset=${offset}`;
      if (event) url += `&event=${encodeURIComponent(event)}`;
      const data = await hubFetch(url, { token });
      setLogs(prev => append ? [...prev, ...data.logs] : data.logs);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadBlocklist = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/blocklist', { token });
      setBlocklist(data.entries);
    } catch (e) { setError(e.message); }
  }, [token]);

  useEffect(() => {
    setError('');
    if (tab === 'general') loadSettings();
    else if (tab === 'stats') {
      loadStats();
      hubFetch('/v1/admin/mail', { token })
        .then(setMailStatus).catch(() => { /* the cards still render */ });
    }
    else if (tab === 'users') loadUsers(userSearch);
    else if (tab === 'groups') loadGroups();
    else if (tab === 'nodes') {
      hubFetch('/v1/admin/nodes', { token })
        .then(d => setNodes(d.nodes || [])).catch(e => setError(e.message));
    }
    else if (tab === 'logs') { setLogOffset(0); loadLogs(logEvent, 0); }
    else if (tab === 'blocklist') loadBlocklist();
  }, [tab]);

  const deleteUser = useCallback(async (u) => {
    // Suspension is the reversible tool and stays one click away; this one is
    // not, so it names the account and says what it cannot reach.
    if (!await ask(t('admin.delete_confirm', { user: u.username }))) return;
    try {
      await hubFetch(`/v1/admin/users/${u.id}`, { method: 'DELETE', token });
      loadUsers(userSearch);
    } catch (err) {
      tell(err.message);
    }
  }, [token, userSearch, loadUsers]);

  const patchUser = useCallback(async (userId, patch) => {
    try {
      await hubFetch(`/v1/admin/users/${userId}`, { method: 'PATCH', body: patch, token });
      loadUsers(userSearch);
      if (detailUser && detailUser.id === userId) setDetailUser(null);
    } catch (e) { setError(e.message); }
  }, [token, userSearch, detailUser]);

  const patchGroup = useCallback(async (groupId, patch) => {
    try {
      await hubFetch(`/v1/admin/groups/${groupId}`, { method: 'PATCH', body: patch, token });
      loadGroups();
    } catch (e) { setError(e.message); }
  }, [token]);

  const revokeGroup = useCallback(async (g) => {
    // Suspending is the reversible tool and stays one click away; revoking
    // pushes a signed revocation to every node hosting the group and there is
    // no undo from here, so it names the group and asks first.
    if (!await ask(t('admin.revoke_group_confirm', { group: g.name }))) return;
    try {
      await hubFetch('/v1/admin/revoke',
        { method: 'POST', body: { target: 'group', target_id: g.id }, token });
      loadGroups();
    } catch (e) { setError(e.message); }
  }, [token]);

  const showUserDetail = useCallback(async (userId) => {
    try {
      const data = await hubFetch(`/v1/admin/users/${userId}`, { token });
      setDetailUser(data);
    } catch (e) { setError(e.message); }
  }, [token]);

  const addToBlocklist = useCallback(async (hash, reason) => {
    try {
      await hubFetch('/v1/admin/blocklist', { method: 'POST', body: { content_hash: hash, reason }, token });
      loadBlocklist();
    } catch (e) { setError(e.message); }
  }, [token]);

  const removeFromBlocklist = useCallback(async (hash) => {
    try {
      await hubFetch(`/v1/admin/blocklist/${hash}`, { method: 'DELETE', token });
      loadBlocklist();
    } catch (e) { setError(e.message); }
  }, [token]);

  // The order the fields are shown in, and the only keys the panel will send.
// The hub refuses anything outside its own list as well — a form is not where
// that decision belongs.
const MAIL_FIELDS = [
  'hourly_budget',
  'hourly_reserved_for_recovery',
  'destination_daily_cap',
  'destination_cooldown_seconds',
  'invite_link_daily_cap',
  'verification_resend_cooldown',
  'reset_cooldown',
  'email_change_cooldown',
];

const LOGIN_FIELDS = ['max_failures', 'lockout_minutes'];

const SESSION_FIELDS = ['browser_idle_hours', 'refresh_idle_hours', 'max_hours'];

// Only what changed, and only what is a number: an empty field is someone
// mid-edit, not a request to set zero.
const changedNumbers = (fields, draft, stored) => Object.fromEntries(fields
  .filter(k => draft[k] !== '' && draft[k] !== null && Number(draft[k]) !== stored[k])
  .map(k => [k, Number(draft[k])]));

const TABS = ['general', 'stats', 'users', 'groups', 'nodes', 'logs', 'blocklist'];
  const canEditSettings = role === 'admin';

  return html`
    <div>
      <h2>${t('admin.title')}</h2>
      ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}

      <div class="admin-tabs">
        ${TABS.map(k => html`
          <button key=${k} class="admin-tab ${tab === k ? 'active' : ''}"
            onClick=${() => setTab(k)}>${t('admin.tab_' + k)}</button>
        `)}
      </div>

      ${tab === 'general' && settings && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('admin.general_groups_heading')}</h3>
          <div class="settings-row">
            <span class="settings-label">${t('admin.allow_public_groups_label')}</span>
            <label class="toggle-switch ${!canEditSettings || settingsSaving ? 'toggle-switch-disabled' : ''}">
              <input type="checkbox" checked=${settings.allow_public_groups}
                disabled=${!canEditSettings || settingsSaving}
                onChange=${e => saveSettings({ allow_public_groups: e.target.checked })} />
              <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
            </label>
          </div>
          <p class="settings-hint">${t('admin.allow_public_groups_hint')}</p>
          ${!canEditSettings && html`
            <p class="settings-hint">${t('admin.settings_readonly')}</p>`}
        </div>

        <div class="settings-section">
          <h3 class="settings-heading">${t('admin.mail_heading')}</h3>
          <p class="settings-hint">${t('admin.mail_hint')}</p>

          <p class="settings-hint">${t('admin.mail_state_is_in_stats')}</p>

          ${mailDraft && MAIL_FIELDS.map(key => html`
            <div class="settings-row" key=${key}>
              <span class="settings-label">${t('admin.mail_' + key)}</span>
              <input type="number" class="settings-number"
                min=${(settings.mail_bounds?.[key] || [0])[0]}
                max=${(settings.mail_bounds?.[key] || [0, 0])[1]}
                value=${mailDraft[key]}
                disabled=${!canEditSettings || settingsSaving}
                onInput=${e => setMailDraft(d => ({ ...d, [key]: e.target.value }))} />
            </div>
          `)}

          ${canEditSettings && mailDraft && html`
            <div class="settings-row">
              <button class="btn" disabled=${settingsSaving}
                onClick=${() => saveSettings({
                  mail: changedNumbers(MAIL_FIELDS, mailDraft, settings.mail),
                })}>${t('admin.mail_save')}</button>
              <button class="btn btn-secondary" disabled=${settingsSaving}
                onClick=${() => setMailDraft({ ...settings.mail_defaults })}
                >${t('admin.mail_reset_defaults')}</button>
            </div>
          `}
        </div>

        ${settings.login && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('admin.login_heading')}</h3>
          <p class="settings-hint">${t('admin.login_hint')}</p>

          ${loginDraft && LOGIN_FIELDS.map(key => html`
            <div class="settings-row" key=${key}>
              <span class="settings-label">${t('admin.login_' + key)}</span>
              <input type="number" class="settings-number"
                min=${(settings.login_bounds?.[key] || [0])[0]}
                max=${(settings.login_bounds?.[key] || [0, 0])[1]}
                value=${loginDraft[key]}
                disabled=${!canEditSettings || settingsSaving}
                onInput=${e => setLoginDraft(d => ({ ...d, [key]: e.target.value }))} />
            </div>
          `)}

          ${canEditSettings && loginDraft && html`
            <div class="settings-row">
              <button class="btn" disabled=${settingsSaving}
                onClick=${() => saveSettings({
                  login: changedNumbers(LOGIN_FIELDS, loginDraft, settings.login),
                })}>${t('admin.login_save')}</button>
              <button class="btn btn-secondary" disabled=${settingsSaving}
                onClick=${() => setLoginDraft({ ...settings.login_defaults })}
                >${t('admin.mail_reset_defaults')}</button>
            </div>
          `}
        </div>

        <div class="settings-section">
          <h3 class="settings-heading">${t('admin.session_heading')}</h3>
          <p class="settings-hint">${t('admin.session_hint')}</p>

          ${sessionDraft && SESSION_FIELDS.map(key => html`
            <div class="settings-row" key=${key}>
              <span class="settings-label">${t('admin.session_' + key)}</span>
              <input type="number" class="settings-number"
                min=${(settings.session_bounds?.[key] || [0])[0]}
                max=${(settings.session_bounds?.[key] || [0, 0])[1]}
                value=${sessionDraft[key]}
                disabled=${!canEditSettings || settingsSaving}
                onInput=${e => setSessionDraft(d => ({ ...d, [key]: e.target.value }))} />
            </div>
          `)}

          ${canEditSettings && sessionDraft && html`
            <div class="settings-row">
              <button class="btn" disabled=${settingsSaving}
                onClick=${() => saveSettings({
                  session: changedNumbers(SESSION_FIELDS, sessionDraft, settings.session),
                })}>${t('admin.session_save')}</button>
              <button class="btn btn-secondary" disabled=${settingsSaving}
                onClick=${() => setSessionDraft({ ...settings.session_defaults })}
                >${t('admin.mail_reset_defaults')}</button>
            </div>
          `}
        </div>
        `}
      `}

      ${tab === 'stats' && stats && html`
        <div class="admin-stats">
          ${[['users', 'stat_users'], ['groups', 'stat_groups'],
             ['nodes', 'stat_nodes'], ['online_nodes', 'stat_online']].map(([k, label]) => html`
            <div class="stat-card" key=${k}>
              <div class="stat-value">${stats[k]}</div>
              <div class="stat-label">${t('admin.' + label)}</div>
            </div>
          `)}
        </div>

        ${mailStatus && html`
          <div class="settings-section">
            <h3 class="settings-heading">${t('admin.mail_heading')}</h3>

            ${mailStatus.all_exhausted && html`
              <div class="error-msg">${t('admin.mail_alert_all')}</div>`}
            ${!mailStatus.all_exhausted && mailStatus.general_exhausted && html`
              <div class="warn-msg">${t('admin.mail_alert_general')}</div>`}

            <div class="admin-stats">
              <div class="stat-card">
                <div class="stat-value">${mailStatus.hourly_used} / ${mailStatus.hourly_budget}</div>
                <div class="stat-label">${t('admin.mail_this_hour')}</div>
              </div>
              <div class="stat-card">
                <div class="stat-value">${mailStatus.general_remaining}</div>
                <div class="stat-label">${t('admin.mail_left_signups')}</div>
              </div>
              <div class="stat-card">
                <div class="stat-value">${mailStatus.recovery_remaining}</div>
                <div class="stat-label">${t('admin.mail_left_recovery')}</div>
              </div>
              <div class="stat-card">
                <div class="stat-value">${mailStatus.recipients_tracked}</div>
                <div class="stat-label">${t('admin.mail_recipients')}</div>
              </div>
            </div>
            <p class="settings-hint">${t('admin.mail_state_hint')}</p>
          </div>
        `}
      `}

      ${tab === 'users' && html`
        <div class="admin-toolbar">
          <input class="admin-search" type="text" placeholder="${t('admin.users_search')}"
            value=${userSearch} onInput=${e => { setUserSearch(e.target.value); loadUsers(e.target.value); }} />
          <span class="settings-value">${usersTotal} total</span>
        </div>
      <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_username')}</th>
            <th>${t('admin.col_role')}</th>
            <th>${t('admin.col_status')}</th>
            <th>${t('admin.col_created')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${users.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_users')}</td></tr>`}
            ${users.map(u => html`
              <tr key=${u.id}>
                <td>${u.username}</td>
                <td>
                  <select class="admin-role-select" value=${u.role}
                    onChange=${e => patchUser(u.id, { role: e.target.value })}>
                    <option value="user">user</option>
                    <option value="moderator">moderator</option>
                    <option value="admin">admin</option>
                  </select>
                </td>
                <td><span class="badge ${u.status === 'active' ? 'badge-ok' : u.status === 'suspended' ? 'badge-err' : ''}">${u.status}</span></td>
                <td>${new Date(u.created_at).toLocaleDateString()}</td>
                <td class="admin-actions">
                  <button class="admin-btn" onClick=${() => showUserDetail(u.id)}>${t('admin.btn_details')}</button>
                  ${u.status === 'active'
                    ? html`<button class="admin-btn danger" onClick=${() => patchUser(u.id, { status: 'suspended' })}>${t('admin.btn_suspend')}</button>`
                    : u.status === 'suspended'
                      ? html`<button class="admin-btn" onClick=${() => patchUser(u.id, { status: 'active' })}>${t('admin.btn_unsuspend')}</button>`
                      : null
                  }
                  ${u.status !== 'deleted' && html`
                    <button class="admin-btn danger"
                      onClick=${() => deleteUser(u)}>${t('admin.btn_delete')}</button>
                  `}
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${tab === 'groups' && html`
        <div class="admin-toolbar">
          <span class="settings-value">${groupsTotal} total</span>
        </div>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_name')}</th>
            <th>${t('admin.col_visibility')}</th>
            <th>${t('admin.col_members')}</th>
            <th>${t('admin.col_status')}</th>
            <th>${t('admin.col_created')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${groups.length === 0 && html`<tr><td colspan="6" class="admin-empty">${t('admin.no_groups')}</td></tr>`}
            ${groups.map(g => html`
              <tr key=${g.id}>
                <td><${GroupName} name=${g.name} owner=${g.owner_username} /></td>
                <td><span class="badge">${g.visibility}</span></td>
                <td>${g.member_count}</td>
                <td><span class="badge ${g.status === 'active' ? 'badge-ok' : g.status === 'suspended' ? 'badge-err' : ''}">${g.status}</span></td>
                <td>${new Date(g.created_at).toLocaleDateString()}</td>
                <td class="admin-actions">
                  ${g.status === 'active'
                    ? html`<button class="admin-btn danger" onClick=${() => patchGroup(g.id, { status: 'suspended' })}>${t('admin.btn_suspend')}</button>`
                    : g.status === 'suspended'
                      ? html`<button class="admin-btn" onClick=${() => patchGroup(g.id, { status: 'active' })}>${t('admin.btn_unsuspend')}</button>`
                      : null
                  }
                  ${g.status !== 'revoked' && html`
                    <button class="admin-btn danger"
                      onClick=${() => revokeGroup(g)}>${t('admin.btn_revoke')}</button>
                  `}
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${tab === 'nodes' && html`
        <p class="settings-hint" style="margin-bottom:10px">
          ${t('admin.nodes_hint')}
        </p>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_username')}</th>
            <th>${t('admin.col_observed_ip')}</th>
            <th>${t('admin.col_hint')}</th>
            <th>${t('admin.col_last_seen')}</th>
            <th>${t('admin.col_status')}</th>
          </tr></thead>
          <tbody>
            ${nodes.length === 0 && html`
              <tr><td colspan="5" class="admin-empty">${t('admin.no_nodes')}</td></tr>
            `}
            ${nodes.map(n => html`
              <tr key=${n.id}>
                <td>${n.username || n.user_id.slice(0, 8)}</td>
                <td style="font-family:monospace">${n.observed_ip || '—'}</td>
                <td style="font-family:monospace;color:var(--text-dim)">
                  ${n.endpoint_hint || '—'}
                </td>
                <td>${n.last_seen ? new Date(n.last_seen).toLocaleString() : '—'}</td>
                <td>
                  <span class="badge ${n.online ? 'badge-ok' : ''}">
                    ${n.online ? t('admin.node_online') : t('admin.node_offline')}
                  </span>
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${tab === 'logs' && html`
        <div class="admin-toolbar">
          <select class="admin-select" value=${logEvent} onChange=${e => {
            setLogEvent(e.target.value);
            setLogOffset(0);
            loadLogs(e.target.value, 0);
          }}>
            <option value="">${t('admin.filter_all')}</option>
            ${['login', 'login_fail', 'login_locked', 'account_create', 'token_refresh', 'group_create',
               'group_join', 'group_leave', 'node_announce', 'revoke_user', 'revoke_group',
               'admin_user_update', 'admin_group_update'].map(ev => html`
              <option key=${ev} value=${ev}>${ev}</option>
            `)}
          </select>
        </div>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_time')}</th>
            <th>${t('admin.col_user')}</th>
            <th>${t('admin.col_event')}</th>
            <th>${t('admin.col_ip')}</th>
            <th>${t('admin.col_detail')}</th>
          </tr></thead>
          <tbody>
            ${logs.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_logs')}</td></tr>`}
            ${logs.map(lg => html`
              <tr key=${lg.id}>
                <td style="white-space:nowrap">${new Date(lg.timestamp).toLocaleString()}</td>
                <td>${lg.username || ''}</td>
                <td><span class="badge">${lg.event}</span></td>
                <td>${lg.ip_address}</td>
                <td>${lg.detail || ''}</td>
              </tr>
            `)}
          </tbody>
        </table>
        ${logs.length > 0 && logs.length % 50 === 0 && html`
          <button class="admin-btn admin-load-more" onClick=${() => {
            const next = logOffset + 50;
            setLogOffset(next);
            loadLogs(logEvent, next, true);
          }}>${t('admin.btn_load_more')}</button>
        `}
      `}

      ${tab === 'blocklist' && html`
        <${BlocklistForm} onAdd=${addToBlocklist} />
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_hash')}</th>
            <th>${t('admin.col_reason')}</th>
            <th>${t('admin.col_date')}</th>
            <th>${t('admin.col_added_by')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${blocklist.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_blocked')}</td></tr>`}
            ${blocklist.map(b => html`
              <tr key=${b.hash}>
                <td style="font-family:monospace;font-size:0.8em">${b.hash.slice(0, 16)}...</td>
                <td>${b.reason}</td>
                <td>${new Date(b.added_at).toLocaleDateString()}</td>
                <td>${b.added_by || ''}</td>
                <td>
                  <button class="admin-btn" onClick=${() => removeFromBlocklist(b.hash)}>${t('admin.btn_unblock')}</button>
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${detailUser && html`
        <div class="admin-detail-overlay" onClick=${e => {
          if (e.target.classList.contains('admin-detail-overlay')) setDetailUser(null);
        }}>
          <div class="admin-detail-card">
            <h3>${t('admin.user_detail')}</h3>
            ${[
              ['admin.col_username', detailUser.username],
              ['admin.col_email', detailUser.email],
              ['admin.col_role', detailUser.role],
              ['admin.col_status', detailUser.status],
              ['admin.col_created', new Date(detailUser.created_at).toLocaleString()],
              ['admin.col_groups', detailUser.group_count],
            ].map(([label, val]) => html`
              <div class="admin-detail-row" key=${label}>
                <span class="admin-detail-label">${t(label)}</span>
                <span class="admin-detail-value">${val}</span>
              </div>
            `)}
            <button class="admin-btn" style="margin-top:16px;width:100%"
              onClick=${() => setDetailUser(null)}>${t('admin.btn_close')}</button>
          </div>
        </div>
      `}
    </div>
  `;
}

function BlocklistForm({ onAdd }) {
  const [hash, setHash] = useState('');
  const [reason, setReason] = useState('');

  const submit = (e) => {
    e.preventDefault();
    if (hash.length === 64 && reason) {
      onAdd(hash, reason);
      setHash('');
      setReason('');
    }
  };

  return html`
    <form class="blocklist-form" onSubmit=${submit}>
      <input type="text" placeholder="${t('admin.hash_placeholder')}"
        value=${hash} onInput=${e => setHash(e.target.value)}
        pattern="[0-9a-f]{64}" required />
      <input type="text" placeholder="${t('admin.reason_placeholder')}"
        value=${reason} onInput=${e => setReason(e.target.value)} required />
      <button class="admin-btn" type="submit">${t('admin.btn_block')}</button>
    </form>
  `;
}