/* ============================================================
   admin.jsx — Веб-Админка: layout + роутер
   ============================================================ */

const { useState, useEffect } = React;

/* ─── Admin nav items ─── */
const ADMIN_NAV = [
  { id: 'adm-dashboard', icon: '📊', label: 'Дашборд' },
  { id: 'adm-users',     icon: '👥', label: 'Юзеры' },
  { id: 'adm-finance',   icon: '💰', label: 'Финансы' },
  { id: 'adm-settings',  icon: '⚙️', label: 'Настройки' },
  { id: 'adm-content',   icon: '✏️', label: 'Тексты/Команды' },
  { id: 'adm-extra',     icon: '🧩', label: 'Баннеры/Новости/Промо' },
  { id: 'adm-templates', icon: '🎨', label: 'Шаблоны' },
  { id: 'adm-broadcast', icon: '📢', label: 'Рассылка/Видео' },
  { id: 'adm-wheel',     icon: '🎡', label: 'Колесо фортуны' },
];

/* ─── Admin Sidebar ─── */
function AdminSidebar({ page }) {
  const { navigate } = useNav();
  const { user, onLogout } = useAuth();

  return (
    <aside className="sidebar" style={{ background: '#0c0c16' }}>
      <div className="sidebar-logo">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Logo size={15} />
          <span style={{ fontSize: 11, background: 'rgba(139,92,246,.25)', color: '#c4b5fd', padding: '2px 8px', borderRadius: 99, fontWeight: 700 }}>ADMIN</span>
        </div>
      </div>

      <nav className="sidebar-nav">
        {ADMIN_NAV.map(item => (
          <button
            key={item.id}
            className={`snav${page === item.id ? ' on' : ''}`}
            onClick={() => navigate(item.id)}
          >
            <span className="snav-ic">{item.icon}</span>
            {item.label}
          </button>
        ))}

        <div style={{ height: 1, background: 'var(--border)', margin: '12px 0' }} />

        <button className="snav" onClick={() => navigate('studio')}>
          <span className="snav-ic">← </span>
          К студии
        </button>
      </nav>

      <div className="sidebar-foot">
        <div className="sidebar-user">
          <div className="avatar" style={{ background: 'linear-gradient(135deg, #8b5cf6, #ec4899)' }}>
            {(user?.web_name || user?.first_name || 'A')[0].toUpperCase()}
          </div>
          <div className="sidebar-user-meta">
            <div className="su-name">{user?.web_name || 'Администратор'}</div>
            <div className="su-email muted" style={{ fontSize: 11, color: '#c4b5fd' }}>⚡ Admin</div>
          </div>
          <button className="logout-btn" onClick={onLogout}>⏏</button>
        </div>
      </div>
    </aside>
  );
}

/* ─── Admin TopBar (mobile) ─── */
function AdminTopBar({ page }) {
  const item = ADMIN_NAV.find(n => n.id === page) || ADMIN_NAV[0];
  const { navigate } = useNav();
  return (
    <div className="studio-topbar">
      <button className="snav" style={{ padding: '6px 10px' }} onClick={() => navigate('studio')}>← Студия</button>
      <span style={{ fontWeight: 700 }}>{item.icon} {item.label}</span>
      <span className="badge badge-accent" style={{ fontSize: 11 }}>ADMIN</span>
    </div>
  );
}

/* ─── Admin Layout ─── */
function AdminLayout({ page }) {
  const { user } = useAuth();
  const { navigate } = useNav();

  if (!user?.is_admin) {
    navigate('studio');
    return null;
  }

  return (
    <div className="studio">
      <AdminSidebar page={page} />
      <div className="studio-main">
        <AdminTopBar page={page} />
        <div className="studio-main-in view-enter">
          {page === 'adm-dashboard' && <AdminDashboard />}
          {page === 'adm-users'     && <AdminUsers />}
          {page === 'adm-finance'   && <AdminFinance />}
          {page === 'adm-settings'  && <AdminSettings />}
          {page === 'adm-content'   && <AdminContent />}
          {page === 'adm-extra'     && <AdminExtra />}
          {page === 'adm-templates' && <AdminTemplates />}
          {page === 'adm-broadcast' && <AdminBroadcast />}
          {page === 'adm-wheel'     && <AdminWheel />}
        </div>
      </div>
    </div>
  );
}

/* ─── Admin Dashboard (статистика) ─── */
function AdminDashboard() {
  const { API_BASE } = useAuth();
  const { navigate } = useNav();
  const [finance, setFinance] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API_BASE}/api/tg/admin/finance?period=7d`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(setFinance)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const stats = [
    { label: 'Выручка 7д', value: finance ? `${(finance.revenue?.totalRub ?? 0).toLocaleString('ru')}₽` : '—', icon: '💰', view: 'adm-finance' },
    { label: 'Прибыль 7д', value: finance ? `${(finance.profit?.rub ?? 0).toLocaleString('ru')}₽` : '—', icon: '📈', view: 'adm-finance' },
    { label: 'Генераций', value: finance ? (finance.activity?.totalGens ?? 0) : '—', icon: '🎨', view: 'adm-users' },
    { label: 'Всего юзеров', value: finance ? (finance.activity?.totalUsers ?? 0) : '—', icon: '👥', view: 'adm-users' },
  ];

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">📊 Дашборд</h1>
          <p className="page-sub muted">Статистика за 7 дней</p>
        </div>
      </div>

      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div>
      ) : (
        <div className="grid-2" style={{ marginBottom: 28 }}>
          {stats.map(s => (
            <button key={s.label} className="glass hov-lift balance-card" onClick={() => navigate(s.view)} style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 28 }}>{s.icon}</div>
              <div style={{ fontSize: 28, fontWeight: 800 }}>{s.value}</div>
              <div className="muted" style={{ fontSize: 13 }}>{s.label}</div>
            </button>
          ))}
        </div>
      )}

      <div className="grid-3" style={{ gap: 14 }}>
        {ADMIN_NAV.slice(1).map(item => (
          <button key={item.id} className="glass hov-lift" style={{ padding: '20px 22px', textAlign: 'left' }} onClick={() => navigate(item.id)}>
            <div style={{ fontSize: 26, marginBottom: 8 }}>{item.icon}</div>
            <div style={{ fontWeight: 700 }}>{item.label}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ─── Колесо фортуны (spin-wheel призы) ─── */
function AdminWheel() {
  const { API_BASE } = useAuth();
  const toast = useToast();
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState(null);
  const [saving, setSaving] = useState(false);

  async function load() {
    setLoading(true);
    try { const r = await fetch(`${API_BASE}/api/tg/admin/spin-wheel`, { credentials: 'include' }); if (r.ok) setItems(await r.json()); }
    catch {} finally { setLoading(false); }
  }

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

  async function save() {
    setSaving(true);
    try {
      const payload = {
        ...(form.id && { id: form.id }),
        label: form.label,
        diamonds: Number(form.diamonds) || 0,
        probability: Number(form.probability) || 0,
        color: form.color || '#6B73FF',
        isActive: form.isActive ?? true,
        sortOrder: Number(form.sortOrder) || 0,
      };
      const r = await fetch(`${API_BASE}/api/tg/admin/spin-wheel`, {
        method: form.id ? 'PUT' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload), credentials: 'include',
      });
      if (r.ok) { toast('Сохранено', 'ok'); setForm(null); load(); }
      else { const d = await r.json(); toast(d.error || 'Ошибка', 'warn'); }
    } catch { toast('Ошибка', 'warn'); } finally { setSaving(false); }
  }

  async function del(id) {
    if (!confirm('Удалить приз?')) return;
    await fetch(`${API_BASE}/api/tg/admin/spin-wheel?id=${id}`, { method: 'DELETE', credentials: 'include' });
    toast('Удалено', 'ok'); load();
  }

  const probSum = items.reduce((s, p) => s + (Number(p.probability) || 0), 0);

  if (form) return (
    <div style={{ maxWidth: 440 }}>
      <div className="page-head"><button className="btn btn-ghost back-btn" onClick={() => setForm(null)}>← Назад</button></div>
      <div className="glass" style={{ padding: 24 }}>
        <div className="block-title" style={{ marginBottom: 18 }}>{form.id ? 'Редактировать приз' : 'Новый приз'}</div>
        <div className="field" style={{ marginBottom: 12 }}>
          <label className="field-label">Название (label)</label>
          <input className="field-input" value={form.label || ''} onChange={e => setForm(f => ({...f, label: e.target.value}))} />
        </div>
        <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
          <div className="field" style={{ flex: 1 }}>
            <label className="field-label">🍌 Бананы</label>
            <input className="field-input" type="number" value={form.diamonds ?? 0} onChange={e => setForm(f => ({...f, diamonds: Number(e.target.value)}))} />
          </div>
          <div className="field" style={{ flex: 1 }}>
            <label className="field-label">Вероятность (0–1)</label>
            <input className="field-input" type="number" step="0.01" value={form.probability ?? 0} onChange={e => setForm(f => ({...f, probability: Number(e.target.value)}))} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
          <div className="field" style={{ flex: 1 }}>
            <label className="field-label">Цвет</label>
            <input className="field-input" type="color" value={form.color || '#6B73FF'} onChange={e => setForm(f => ({...f, color: e.target.value}))} style={{ height: 40, padding: 4 }} />
          </div>
          <div className="field" style={{ width: 120 }}>
            <label className="field-label">Порядок</label>
            <input className="field-input" type="number" value={form.sortOrder ?? 0} onChange={e => setForm(f => ({...f, sortOrder: Number(e.target.value)}))} />
          </div>
        </div>
        <Toggle label="Активен" value={form.isActive ?? true} onChange={v => setForm(f => ({...f, isActive: v}))} />
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button className="btn btn-accent" onClick={save} disabled={saving || !form.label}>{saving ? <Spinner sm /> : 'Сохранить'}</button>
          <button className="btn btn-ghost" onClick={() => setForm(null)}>Отмена</button>
        </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">Призы и вероятности · сумма вероятностей: {(probSum * 100).toFixed(0)}%
            {Math.abs(probSum - 1) > 0.001 && <span style={{ color: '#fca5a5' }}> (должно быть 100%)</span>}
          </p>
        </div>
      </div>
      <button className="btn btn-accent btn-sm" style={{ marginBottom: 16 }} onClick={() => setForm({ label: '', diamonds: 0, probability: 0, color: '#6B73FF', isActive: true, sortOrder: items.length })}>+ Добавить приз</button>
      {loading ? <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div> : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map(p => (
            <div key={p.id} className="glass" style={{ padding: '14px 18px', display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, background: p.color, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700 }}>{p.label}</div>
                <div className="muted" style={{ fontSize: 12 }}>🍌 {p.diamonds} · {(Number(p.probability) * 100).toFixed(1)}% · #{p.sortOrder}</div>
              </div>
              <span className={`pill${p.isActive ? ' pill-free' : ''}`}>{p.isActive ? 'Активен' : 'Откл.'}</span>
              <button className="btn btn-ghost btn-sm" onClick={() => setForm(p)}>✏️</button>
              <button className="btn btn-sm" style={{ color: '#fca5a5' }} onClick={() => del(p.id)}>🗑</button>
            </div>
          ))}
          {items.length === 0 && <EmptyState icon="🎡" title="Нет призов" sub="Добавь призы для колеса фортуны" />}
        </div>
      )}
    </div>
  );
}