/* ============================================================
   admin-users.jsx — Управление пользователями
   API (camelCase): GET {users[],total} • PUT {tgId,action,amount,plan,days}
   DELETE ?tgId= • POST {tgId} → {images,videos} (история)
   ============================================================ */

const { useState, useEffect } = React;

function AdminUsers() {
  const { API_BASE } = useAuth();
  const toast = useToast();

  const [users, setUsers] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);
  const [selected, setSelected] = useState(null);
  const [actionModal, setActionModal] = useState(null); // { type, user }
  const [actionValue, setActionValue] = useState('');
  const [actionLoading, setActionLoading] = useState(false);

  /* история генераций выбранного юзера */
  const [hist, setHist] = useState({ images: [], videos: [] });
  const [histTab, setHistTab] = useState('images');
  const [histLoading, setHistLoading] = useState(false);

  const PAGE_SIZE = 20;

  async function load(p = 1) {
    setLoading(true);
    try {
      const params = new URLSearchParams({ page: p });
      const r = await fetch(`${API_BASE}/api/tg/admin/users?${params}`, { credentials: 'include' });
      const data = await r.json();
      if (r.ok) {
        setUsers(data.users || []);
        setTotal(data.total || 0);
        setPage(p);
      }
    } catch { toast('Ошибка загрузки', 'warn'); }
    finally { setLoading(false); }
  }

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

  async function openUser(u) {
    setSelected(u);
    setHist({ images: [], videos: [] });
    setHistTab('images');
    if (!u.tgId) return;
    setHistLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/users`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tgId: u.tgId }),
        credentials: 'include',
      });
      if (r.ok) setHist(await r.json());
    } catch {} finally { setHistLoading(false); }
  }

  async function doAction() {
    if (!actionModal) return;
    const { type, user } = actionModal;

    let body;
    if (type === 'add_diamonds')    body = { action: 'diamonds', amount: Number(actionValue) };
    else if (type === 'remove_diamonds') body = { action: 'diamonds', amount: -Math.abs(Number(actionValue)) };
    else if (type === 'add_bananas') body = { action: 'bananas', amount: Number(actionValue) };
    else if (type === 'plan')        body = { action: 'plan', plan: actionValue === 'free' ? null : actionValue, days: 30 };

    if ((type !== 'plan') && (!body || isNaN(body.amount) || body.amount === 0)) { toast('Введи число > 0', 'warn'); return; }
    if (type === 'plan' && !actionValue) { toast('Выбери тариф', 'warn'); return; }

    setActionLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/users`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tgId: user.tgId, ...body }),
        credentials: 'include',
      });
      if (r.ok) {
        toast('Готово ✓', 'ok');
        setActionModal(null);
        setActionValue('');
        load(page);
        if (selected) setSelected(s => ({ ...s }));
      } else {
        const d = await r.json();
        toast(d.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка сети', 'warn'); }
    finally { setActionLoading(false); }
  }

  async function deleteUser(tgId) {
    if (!confirm('Удалить пользователя? Это необратимо.')) return;
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/users?tgId=${tgId}`, {
        method: 'DELETE',
        credentials: 'include',
      });
      if (r.ok) { toast('Удалён', 'ok'); setSelected(null); load(page); }
      else { const d = await r.json(); toast(d.error || 'Ошибка', 'warn'); }
    } catch { toast('Ошибка', 'warn'); }
  }

  function fmtDate(d) {
    if (!d) return '—';
    return new Date(d).toLocaleDateString('ru', { day: 'numeric', month: 'short', year: '2-digit' });
  }

  function uname(u) {
    return u.firstName || u.username || `#${u.id}`;
  }

  const totalPages = Math.ceil(total / PAGE_SIZE);

  const filtered = !search ? users : users.filter(u => {
    const s = search.toLowerCase();
    return uname(u).toLowerCase().includes(s) || String(u.tgId || '').includes(s) || (u.username || '').toLowerCase().includes(s);
  });

  /* ─── Action modal ─── */
  if (actionModal) {
    const isPlan = actionModal.type === 'plan';
    return (
      <div style={{ maxWidth: 460 }}>
        <div className="page-head">
          <button className="btn btn-ghost back-btn" onClick={() => { setActionModal(null); setActionValue(''); }}>← Назад</button>
        </div>
        <div className="glass" style={{ padding: 28 }}>
          <div className="block-title" style={{ marginBottom: 20 }}>
            {{
              add_diamonds: '💎 Добавить алмазы',
              remove_diamonds: '💎 Списать алмазы',
              add_bananas: '🍌 Добавить бананы',
              plan: '⭐ Изменить тариф',
            }[actionModal.type]}
          </div>
          <div className="muted" style={{ marginBottom: 16, fontSize: 13 }}>
            Пользователь: {uname(actionModal.user)} (tg: {actionModal.user.tgId})
          </div>

          {isPlan ? (
            <div className="seg" style={{ marginBottom: 16 }}>
              {['free', 'pro', 'business'].map(p => (
                <button key={p} className={`seg-btn${actionValue === p ? ' on' : ''}`} onClick={() => setActionValue(p)}>
                  {p}
                </button>
              ))}
            </div>
          ) : (
            <input
              className="field-input"
              type="number"
              placeholder="Количество"
              value={actionValue}
              onChange={e => setActionValue(e.target.value)}
              style={{ marginBottom: 16 }}
            />
          )}

          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-accent" onClick={doAction} disabled={actionLoading || !actionValue}>
              {actionLoading ? <Spinner sm /> : 'Применить'}
            </button>
            <button className="btn btn-ghost" onClick={() => { setActionModal(null); setActionValue(''); }}>Отмена</button>
          </div>
        </div>
      </div>
    );
  }

  /* ─── User detail ─── */
  if (selected) {
    return (
      <div>
        <div className="page-head">
          <button className="btn btn-ghost back-btn" onClick={() => setSelected(null)}>← Назад</button>
        </div>
        <div className="glass" style={{ padding: 28, maxWidth: 560 }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
            <div className="avatar avatar-lg">{uname(selected)[0].toUpperCase()}</div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 18 }}>{uname(selected)}</div>
              <div className="muted" style={{ fontSize: 13 }}>tg: {selected.tgId}{selected.username ? ` · @${selected.username}` : ''}</div>
              <div style={{ marginTop: 6 }}>
                <span className={`pill${selected.subscriptionPlan && selected.subscriptionPlan !== 'free' ? ' pill-pro' : ' pill-free'}`}>
                  {selected.subscriptionPlan || 'free'}
                </span>
              </div>
            </div>
          </div>

          <div className="vsummary">
            <div><span className="muted">Алмазы</span><span style={{ color: '#c4b5fd', fontWeight: 700 }}>💎 {selected.diamonds}</span></div>
            <div><span className="muted">Бананы</span><span>🍌 {selected.bananas || 0}</span></div>
            <div><span className="muted">Генераций</span><span>{selected.genCount || 0}</span></div>
            <div><span className="muted">Подписка до</span><span>{fmtDate(selected.premiumUntil)}</span></div>
            <div><span className="muted">Регистрация</span><span>{fmtDate(selected.createdAt)}</span></div>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 20 }}>
            <button className="btn btn-ghost btn-sm" onClick={() => setActionModal({ type: 'add_diamonds', user: selected })}>💎 + Алмазы</button>
            <button className="btn btn-ghost btn-sm" onClick={() => setActionModal({ type: 'remove_diamonds', user: selected })}>💎 − Алмазы</button>
            <button className="btn btn-ghost btn-sm" onClick={() => setActionModal({ type: 'add_bananas', user: selected })}>🍌 + Бананы</button>
            <button className="btn btn-ghost btn-sm" onClick={() => setActionModal({ type: 'plan', user: selected })}>⭐ Тариф</button>
            <button className="btn btn-sm" style={{ background: 'rgba(248,113,113,.12)', color: '#fca5a5', border: '1px solid rgba(248,113,113,.3)' }}
              onClick={() => deleteUser(selected.tgId)}>🗑 Удалить</button>
          </div>
        </div>

        {/* История генераций */}
        <div className="glass" style={{ padding: 24, maxWidth: 560, marginTop: 16 }}>
          <div className="block-title" style={{ marginBottom: 14 }}>История генераций</div>
          <div className="seg" style={{ marginBottom: 16 }}>
            <button className={`seg-btn${histTab === 'images' ? ' on' : ''}`} onClick={() => setHistTab('images')}>🖼 Фото ({hist.images.length})</button>
            <button className={`seg-btn${histTab === 'videos' ? ' on' : ''}`} onClick={() => setHistTab('videos')}>🎬 Видео ({hist.videos.length})</button>
          </div>

          {histLoading ? <div style={{ textAlign: 'center', padding: 20 }}><Spinner /></div> : (
            histTab === 'images' ? (
              hist.images.length === 0 ? <p className="muted" style={{ fontSize: 13 }}>Нет генераций</p> : (
                <div className="hist-grid">
                  {hist.images.map(g => (
                    <div key={g.id} className="glass" style={{ padding: 8 }}>
                      {g.imageUrl ? <img src={g.imageUrl} alt="" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 6 }} /> : <PlaceholderArt type="img" style={{ height: 80 }} />}
                      <div className="muted" style={{ fontSize: 10, marginTop: 4 }}>{g.model} · {fmtDate(g.createdAt)}</div>
                    </div>
                  ))}
                </div>
              )
            ) : (
              hist.videos.length === 0 ? <p className="muted" style={{ fontSize: 13 }}>Нет видео</p> : (
                <div className="hist-list">
                  {hist.videos.map(v => (
                    <div key={v.id} className="glass hist-row">
                      <div className="hist-row-body">
                        <div className="hist-row-head">
                          <span className="hist-model">{v.prompt?.slice(0, 40) || '—'}</span>
                          <span className="muted" style={{ fontSize: 11 }}>{v.status}</span>
                        </div>
                        <div className="hist-sub muted">{v.durationSeconds}с · {fmtDate(v.createdAt)}</div>
                      </div>
                      {v.videoUrl && <a href={v.videoUrl} download className="btn btn-ghost btn-sm">⬇</a>}
                    </div>
                  ))}
                </div>
              )
            )
          )}
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">👥 Юзеры</h1>
          <p className="page-sub muted">Всего: {total}</p>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
        <input
          className="field-input"
          placeholder="Поиск на странице (имя / @username / tgId)"
          value={search}
          onChange={e => setSearch(e.target.value)}
          style={{ flex: 1 }}
        />
        {search && <button className="btn btn-ghost" type="button" onClick={() => setSearch('')}>✕</button>}
      </div>

      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div>
      ) : (
        <div className="hist-list">
          {filtered.map(u => (
            <button key={u.id} className="glass hov-lift hist-row" onClick={() => openUser(u)} style={{ width: '100%', textAlign: 'left' }}>
              <div className="avatar">{uname(u)[0].toUpperCase()}</div>
              <div className="hist-row-body">
                <div className="hist-row-head">
                  <span className="hist-model">{uname(u)}</span>
                  <span className={`pill${u.subscriptionPlan && u.subscriptionPlan !== 'free' ? ' pill-pro' : ' pill-free'}`} style={{ fontSize: 10 }}>
                    {u.subscriptionPlan || 'free'}
                  </span>
                </div>
                <div className="hist-sub muted">
                  tg: {u.tgId} · 💎{u.diamonds} · 🍌{u.bananas || 0} · {fmtDate(u.createdAt)}
                </div>
              </div>
              <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>→</span>
            </button>
          ))}
        </div>
      )}

      {totalPages > 1 && (
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 20 }}>
          <button className="btn btn-ghost btn-sm" disabled={page <= 1} onClick={() => load(page - 1)}>← Пред.</button>
          <span className="muted" style={{ padding: '8px 14px' }}>{page} / {totalPages}</span>
          <button className="btn btn-ghost btn-sm" disabled={page >= totalPages} onClick={() => load(page + 1)}>След. →</button>
        </div>
      )}
    </div>
  );
}