/* ============================================================
   admin-extra.jsx — Баннеры, Новости, Промокоды
   API — camelCase: buttonText/buttonUrl/isActive, imageUrl/isPublished,
   discountPercent/bonusDiamonds/maxUses/onlyNewUsers/usedCount.
   ============================================================ */

const { useState, useEffect } = React;

function AdminExtra() {
  const { API_BASE } = useAuth();
  const toast = useToast();
  const [tab, setTab] = useState('banners');

  const tabs = [
    { id: 'banners', label: '🎯 Баннеры' },
    { id: 'news',    label: '📰 Новости' },
    { id: 'promo',   label: '🎟 Промокоды' },
  ];

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">🧩 Контент</h1>
        </div>
      </div>
      <Tabs items={tabs} active={tab} onChange={setTab} />
      {tab === 'banners' && <AdminBanners API_BASE={API_BASE} toast={toast} />}
      {tab === 'news'    && <AdminNews    API_BASE={API_BASE} toast={toast} />}
      {tab === 'promo'   && <AdminPromo   API_BASE={API_BASE} toast={toast} />}
    </div>
  );
}

/* ─── Generic CRUD list ─── */
function CrudList({ items, onEdit, onDelete, renderItem, loading }) {
  if (loading) return <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div>;
  if (!items.length) return <EmptyState icon="📭" title="Пусто" />;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map(item => (
        <div key={item.id} className="glass" style={{ padding: '14px 18px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ flex: 1 }}>{renderItem(item)}</div>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            <button className="btn btn-ghost btn-sm" onClick={() => onEdit(item)}>✏️</button>
            <button className="btn btn-sm" style={{ color: '#fca5a5' }} onClick={() => onDelete(item.id)}>🗑</button>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ─── Banners ─── */
function AdminBanners({ API_BASE, toast }) {
  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/banners`, { 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 }),
        text: form.text,
        buttonText: form.buttonText || null,
        buttonUrl: form.buttonUrl || null,
        segment: form.segment || 'all',
        isActive: form.isActive ?? true,
      };
      const r = await fetch(`${API_BASE}/api/tg/admin/banners`, {
        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;
    const r = await fetch(`${API_BASE}/api/tg/admin/banners?id=${id}`, { method: 'DELETE', credentials: 'include' });
    if (r.ok) { toast('Удалено', 'ok'); load(); }
  }

  const EMPTY = { text: '', buttonText: '', buttonUrl: '', segment: 'all', isActive: true };

  if (form) return (
    <div style={{ maxWidth: 480 }}>
      <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>
        {[['Текст', 'text', 'textarea'], ['Текст кнопки', 'buttonText', 'text'], ['URL кнопки', 'buttonUrl', 'text']].map(([label, key, type]) => (
          <div key={key} className="field" style={{ marginBottom: 14 }}>
            <label className="field-label">{label}</label>
            {type === 'textarea'
              ? <textarea className="prompt-area" rows={3} value={form[key] || ''} onChange={e => setForm(f => ({...f, [key]: e.target.value}))} />
              : <input className="field-input" value={form[key] || ''} onChange={e => setForm(f => ({...f, [key]: e.target.value}))} />
            }
          </div>
        ))}
        <div className="field" style={{ marginBottom: 14 }}>
          <label className="field-label">Сегмент</label>
          <Seg items={['all','free','pro','business'].map(v => ({value:v,label:v}))} value={form.segment || 'all'} onChange={v => setForm(f => ({...f, segment: v}))} />
        </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.text}>{saving ? <Spinner sm /> : 'Сохранить'}</button>
          <button className="btn btn-ghost" onClick={() => setForm(null)}>Отмена</button>
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <button className="btn btn-accent btn-sm" style={{ marginBottom: 16 }} onClick={() => setForm({ ...EMPTY })}>+ Добавить</button>
      <CrudList items={items} loading={loading} onEdit={b => setForm({ ...EMPTY, ...b })} onDelete={del}
        renderItem={b => (
          <>
            <div style={{ fontWeight: 700, marginBottom: 4 }}>{b.text?.slice(0, 60)}…</div>
            <div className="muted" style={{ fontSize: 12 }}>Сегмент: {b.segment} · {b.isActive ? '✓ Активен' : 'Откл.'}</div>
          </>
        )}
      />
    </div>
  );
}

/* ─── News ─── */
function AdminNews({ API_BASE, toast }) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState(null);
  const [saving, setSaving] = useState(false);
  const [broadcasting, setBroadcasting] = useState(null);

  async function load() {
    setLoading(true);
    try { const r = await fetch(`${API_BASE}/api/tg/admin/news`, { 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 }),
        title: form.title,
        body: form.body,
        imageUrl: form.imageUrl || null,
        isPublished: form.isPublished ?? false,
      };
      const r = await fetch(`${API_BASE}/api/tg/admin/news`, {
        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/news?id=${id}`, { method: 'DELETE', credentials: 'include' });
    load();
  }

  async function broadcast(id) {
    if (!confirm('Разослать всем пользователям?')) return;
    setBroadcasting(id);
    try {
      const r = await fetch(`${API_BASE}/api/tg/admin/news/broadcast`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ newsId: id }), credentials: 'include',
      });
      if (r.ok) toast('Рассылка запущена', 'ok');
      else toast('Ошибка', 'warn');
    } catch {} finally { setBroadcasting(null); }
  }

  if (form) return (
    <div style={{ maxWidth: 480 }}>
      <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: 14 }}>
          <label className="field-label">Заголовок</label>
          <input className="field-input" value={form.title || ''} onChange={e => setForm(f => ({...f, title: e.target.value}))} />
        </div>
        <div className="field" style={{ marginBottom: 14 }}>
          <label className="field-label">Текст</label>
          <textarea className="prompt-area" rows={4} value={form.body || ''} onChange={e => setForm(f => ({...f, body: e.target.value}))} />
        </div>
        <div className="field" style={{ marginBottom: 14 }}>
          <label className="field-label">Картинка</label>
          <AdminImageUpload API_BASE={API_BASE} value={form.imageUrl} onChange={v => setForm(f => ({...f, imageUrl: v}))} toast={toast} />
        </div>
        <Toggle label="Опубликована" value={form.isPublished ?? false} onChange={v => setForm(f => ({...f, isPublished: v}))} />
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button className="btn btn-accent" onClick={save} disabled={saving || !form.title || !form.body}>{saving ? <Spinner sm /> : 'Сохранить'}</button>
          <button className="btn btn-ghost" onClick={() => setForm(null)}>Отмена</button>
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <button className="btn btn-accent btn-sm" style={{ marginBottom: 16 }} onClick={() => setForm({ title: '', body: '', imageUrl: '', isPublished: false })}>+ Добавить</button>
      {loading ? <div style={{ textAlign: 'center', padding: 40 }}><Spinner /></div> : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map(n => (
            <div key={n.id} className="glass" style={{ padding: '14px 18px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              {n.imageUrl && <img src={n.imageUrl} alt="" style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 8 }} />}
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700 }}>{n.title}</div>
                <div className="muted" style={{ fontSize: 12 }}>{n.isPublished ? '✓ Опубликована' : 'Черновик'}</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => setForm(n)}>✏️</button>
                <button className="btn btn-ghost btn-sm" onClick={() => broadcast(n.id)} disabled={broadcasting === n.id}>
                  {broadcasting === n.id ? <Spinner sm /> : '📢'}
                </button>
                <button className="btn btn-sm" style={{ color: '#fca5a5' }} onClick={() => del(n.id)}>🗑</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ─── Promo ─── */
function AdminPromo({ API_BASE, toast }) {
  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/promo`, { 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 }),
        ...(form.id ? {} : { code: form.code }),
        discountPercent: Number(form.discountPercent) || 0,
        bonusDiamonds: Number(form.bonusDiamonds) || 0,
        maxUses: Number(form.maxUses) || null,
        isActive: form.isActive ?? true,
        onlyNewUsers: form.onlyNewUsers ?? false,
      };
      const r = await fetch(`${API_BASE}/api/tg/admin/promo`, {
        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/promo?id=${id}`, { method: 'DELETE', credentials: 'include' });
    load();
  }

  if (form) return (
    <div style={{ maxWidth: 480 }}>
      <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>
        {!form.id && (
          <div className="field" style={{ marginBottom: 12 }}>
            <label className="field-label">Код</label>
            <input className="field-input" value={form.code || ''} onChange={e => setForm(f => ({...f, code: e.target.value}))} />
          </div>
        )}
        {[['Скидка %', 'discountPercent'], ['Бонус 💎', 'bonusDiamonds'], ['Макс. использований', 'maxUses']].map(([label, key]) => (
          <div key={key} className="field" style={{ marginBottom: 12 }}>
            <label className="field-label">{label}</label>
            <input className="field-input" type="number" value={form[key] ?? ''} onChange={e => setForm(f => ({...f, [key]: Number(e.target.value)}))} />
          </div>
        ))}
        <div style={{ display: 'flex', gap: 12 }}>
          <Toggle label="Активен" value={form.isActive ?? true} onChange={v => setForm(f => ({...f, isActive: v}))} />
          <Toggle label="Только новые" value={form.onlyNewUsers ?? false} onChange={v => setForm(f => ({...f, onlyNewUsers: v}))} />
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button className="btn btn-accent" onClick={save} disabled={saving || (!form.id && !form.code)}>{saving ? <Spinner sm /> : 'Сохранить'}</button>
          <button className="btn btn-ghost" onClick={() => setForm(null)}>Отмена</button>
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <button className="btn btn-accent btn-sm" style={{ marginBottom: 16 }} onClick={() => setForm({ code: '', discountPercent: 0, bonusDiamonds: 10, maxUses: 100, isActive: true, onlyNewUsers: false })}>+ Добавить</button>
      <CrudList items={items} loading={loading} onEdit={setForm} onDelete={del}
        renderItem={p => (
          <>
            <div style={{ fontWeight: 700, fontFamily: 'monospace' }}>{p.code}</div>
            <div className="muted" style={{ fontSize: 12 }}>
              {p.discountPercent > 0 ? `-${p.discountPercent}%` : ''} {p.bonusDiamonds > 0 ? `+${p.bonusDiamonds}💎` : ''} · {p.usedCount}/{p.maxUses ?? '∞'} · {p.isActive ? '✓' : 'Откл.'}
            </div>
          </>
        )}
      />
    </div>
  );
}