/* global React, ReactDOM */
const { useState, useEffect, useCallback } = React;

/* ─────────────────────────────────────────────────────────────
   Operator admin panel. Access is gated server-side by the
   ADMIN_EMAILS whitelist — /api/admin/* returns 403 otherwise.
   ───────────────────────────────────────────────────────────── */
async function api(url, opts) {
  const r = await fetch(url, opts);
  let body = {};
  try {
    body = await r.json();
  } catch {
    /* empty body */
  }
  if (r.status === 401) {
    location.href = '/login.html';
    throw new Error('unauthorized');
  }
  return { ok: r.ok, status: r.status, body };
}

const fmt = (n) => Number(n || 0).toLocaleString('ru-RU').replaceAll(',', ' ');

/* ─── Balance adjustment modal ─── */
function AdjustModal({ tenant, onClose, onDone }) {
  const [amount, setAmount] = useState('');
  const [note, setNote] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  async function submit() {
    const a = Number(amount);
    if (!a || Number.isNaN(a)) {
      setErr('Укажите сумму (можно отрицательную)');
      return;
    }
    setBusy(true);
    setErr('');
    const r = await api('/api/admin/tenants/' + tenant.id + '/adjust', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: a, note }),
    });
    setBusy(false);
    if (r.ok) {
      onDone();
      onClose();
    } else {
      setErr(r.body.error || 'Ошибка');
    }
  }

  const field = {
    width: '100%',
    fontFamily: 'JetBrains Mono',
    fontSize: 13,
    padding: '11px 13px',
    border: '1px solid var(--ink)',
    background: 'var(--paper)',
    borderRadius: 3,
    outline: 'none',
    marginTop: 6,
  };
  const lbl = {
    fontFamily: 'JetBrains Mono',
    fontSize: 11,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    color: 'var(--mute)',
    marginTop: 16,
    display: 'block',
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(15, 15, 16, 0.55)',
        display: 'grid',
        placeItems: 'center',
        zIndex: 200,
        padding: 24,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%',
          maxWidth: 420,
          background: 'var(--paper)',
          border: '1px solid var(--ink)',
          borderRadius: 4,
        }}
      >
        <div className="panel-head" style={{ borderBottom: '1px solid var(--ink)' }}>
          <h2>Корректировка баланса</h2>
          <div className="right">
            <a onClick={onClose} style={{ cursor: 'pointer' }}>✕</a>
          </div>
        </div>
        <div style={{ padding: '8px 22px 22px' }}>
          <p style={{ fontSize: 13, color: 'var(--mute)', marginTop: 12 }}>
            {tenant.name} · текущий баланс{' '}
            <b style={{ color: 'var(--ink)' }}>{fmt(tenant.balance)} ₸</b>
          </p>
          <label style={lbl}>Сумма (+ начислить / − списать)</label>
          <input
            type="number"
            value={amount}
            placeholder="например, 5000 или -1000"
            onChange={(e) => setAmount(e.target.value)}
            style={field}
          />
          <label style={lbl}>Комментарий</label>
          <input
            type="text"
            value={note}
            placeholder="причина корректировки"
            onChange={(e) => setNote(e.target.value)}
            style={field}
          />
          {err && (
            <div
              style={{
                marginTop: 12,
                color: 'var(--warn)',
                fontFamily: 'JetBrains Mono',
                fontSize: 12,
              }}
            >
              {err}
            </div>
          )}
          <button
            className="btn btn-ink"
            style={{ marginTop: 18, width: '100%' }}
            disabled={busy}
            onClick={submit}
          >
            {busy ? '…' : 'Применить'}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ─── Access denied screen ─── */
function Denied() {
  return (
    <div style={{ display: 'grid', placeItems: 'center', minHeight: '100vh', textAlign: 'center', padding: 24 }}>
      <div>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 72, color: 'var(--rule-soft)' }}>
          403
        </div>
        <h1 style={{ fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 28, margin: '12px 0 8px' }}>
          Доступ запрещён
        </h1>
        <p style={{ color: 'var(--mute)', fontSize: 14, marginBottom: 22 }}>
          Этот Google-аккаунт не в списке администраторов.
        </p>
        <a className="btn btn-ink" href="/dashboard.html">← В кабинет</a>
      </div>
    </div>
  );
}

/* ─── App ─── */
function App() {
  const [state, setState] = useState('loading'); // loading | denied | error | ready
  const [tenants, setTenants] = useState([]);
  const [adjust, setAdjust] = useState(null);

  const load = useCallback(async () => {
    const r = await api('/api/admin/tenants');
    if (r.status === 403) return setState('denied');
    if (!r.ok) return setState('error');
    setTenants(r.body.tenants || []);
    setState('ready');
  }, []);

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

  if (state === 'loading') {
    return (
      <div style={{ padding: 48, fontFamily: 'var(--mono)', color: 'var(--mute)' }}>Загрузка…</div>
    );
  }
  if (state === 'denied') return <Denied />;
  if (state === 'error') {
    return <div style={{ padding: 48, color: 'var(--warn)' }}>Ошибка загрузки данных</div>;
  }

  const totalBalance = tenants.reduce((s, t) => s + t.balance, 0);
  const totalTurnover = tenants.reduce((s, t) => s + t.cumulativeTurnover, 0);
  const kaspiCount = tenants.filter((t) => t.kaspi).length;

  return (
    <div style={{ maxWidth: 1160, margin: '0 auto', padding: '32px 28px 80px' }}>
      <div className="page-head" style={{ padding: '0 0 24px' }}>
        <div className="title">
          <h1>
            Админка <span className="it">kaspipos.</span>
          </h1>
          <p>Все арендаторы, балансы и обороты. Ручная корректировка баланса.</p>
        </div>
        <div className="actions">
          <a className="btn btn-ghost btn-sm" href="/dashboard.html">← В кабинет</a>
        </div>
      </div>

      <div
        className="kpi-strip"
        style={{ border: '1px solid var(--ink)', borderRadius: 4, marginBottom: 24 }}
      >
        <div className="kpi">
          <div className="k"><span>Арендаторов</span></div>
          <div className="v">{tenants.length}</div>
        </div>
        <div className="kpi">
          <div className="k"><span>Суммарный баланс</span></div>
          <div className="v">{fmt(totalBalance)}<span className="cur">₸</span></div>
        </div>
        <div className="kpi">
          <div className="k"><span>Суммарный оборот</span></div>
          <div className="v">{fmt(totalTurnover)}<span className="cur">₸</span></div>
        </div>
        <div className="kpi">
          <div className="k"><span>Kaspi подключён</span></div>
          <div className="v">
            {kaspiCount}<span className="it">/{tenants.length}</span>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-head">
          <h2>Арендаторы</h2>
          <span className="sub">· {tenants.length}</span>
        </div>
        {tenants.length === 0 ? (
          <div className="empty">
            <div className="glyph">∅</div>
            Арендаторов пока нет
          </div>
        ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th>ID</th>
                <th>Организация</th>
                <th>Баланс</th>
                <th>Оборот</th>
                <th>Ставка</th>
                <th>Платежи</th>
                <th>Kaspi</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {tenants.map((t) => (
                <tr key={t.id}>
                  <td className="col-ref">{t.id}</td>
                  <td>{t.name}</td>
                  <td
                    className="col-amt"
                    style={{ color: t.balance < 0 ? 'var(--warn)' : 'var(--ink)' }}
                  >
                    {fmt(t.balance)} ₸
                  </td>
                  <td className="col-amt">{fmt(t.cumulativeTurnover)} ₸</td>
                  <td className="col-ref">{t.rate}%</td>
                  <td className="col-ref">{t.payments}</td>
                  <td>
                    <span className={'stat-pill ' + (t.kaspi ? 'ok' : 'exp')}>
                      {t.kaspi ? 'подключён' : 'нет'}
                    </span>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    <span
                      onClick={() => setAdjust(t)}
                      style={{
                        cursor: 'pointer',
                        fontFamily: 'var(--mono)',
                        fontSize: 11,
                        letterSpacing: '0.04em',
                        textTransform: 'uppercase',
                        border: '1px solid var(--rule-soft)',
                        padding: '4px 9px',
                        borderRadius: 3,
                      }}
                    >
                      править
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {adjust && (
        <AdjustModal tenant={adjust} onClose={() => setAdjust(null)} onDone={load} />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);