// screen-subscriptions.jsx — справочник абонементов (типов) для оператора:
// поиск по названию, фильтр по филиалу, тап → детали (цена/занятия/срок/описание).
// GET /api/subscription-types (window.api.subTypes.list).
(() => {
  const { useState, useMemo } = React;
  const { fmtMoney } = window.M;
  const BRANCH = { 1: 'Импульс', 2: 'Чемпион' };

  function plural(n, one, few, many) {
    const m10 = n % 10, m100 = n % 100;
    if (m10 === 1 && m100 !== 11) return one;
    if (m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20)) return few;
    return many;
  }
  function visitsLabel(n) { return n ? n + ' ' + plural(n, 'занятие', 'занятия', 'занятий') : 'безлимит'; }
  function daysLabel(d) { return d ? d + ' ' + plural(d, 'день', 'дня', 'дней') : null; }

  window.SubscriptionsScreen = function SubscriptionsScreen() {
    const st = window.useAsync(() => window.api.subTypes.list(), []);
    const { data, loading, error, reload } = st;
    const [q, setQ] = useState('');
    const [branch, setBranch] = useState('all');
    const [detail, setDetail] = useState(null);
    const [creating, setCreating] = useState(false);

    const types = useMemo(() => {
      let arr = Array.isArray(data) ? data : (data && data.items) || [];
      arr = arr.filter((t) => t.active !== false);
      if (branch !== 'all') arr = arr.filter((t) => String(t.branch_id) === String(branch));
      const query = q.trim().toLowerCase();
      if (query) arr = arr.filter((t) => (t.name || '').toLowerCase().includes(query));
      return arr.slice().sort((a, b) =>
        ((a.sort_order ?? 9999) - (b.sort_order ?? 9999)) || (a.name || '').localeCompare(b.name || '', 'ru'));
    }, [data, q, branch]);

    if (loading) return <div className="screen"><Spinner /></div>;
    if (error) return (
      <div className="screen"><div className="empty"><span className="empty-emoji">⚠️</span>{error}
        <div style={{ marginTop: 14 }}><button className="btn btn-ghost btn-sm" onClick={reload}>Повторить</button></div>
      </div></div>
    );

    return (
      <div className="screen">
        <div className="search-bar">
          <span className="search-ico"><Icon name="search" size={20} /></span>
          <input className="input" inputMode="search" placeholder="Название абонемента"
            value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="seg">
          {[['all', 'Все'], ['1', 'Импульс'], ['2', 'Чемпион']].map(([k, label]) => (
            <button key={k} className={'seg-btn' + (branch === k ? ' active' : '')} onClick={() => setBranch(k)}>{label}</button>
          ))}
        </div>

        <button className="btn btn-primary" style={{ marginBottom: 14 }} onClick={() => setCreating(true)}>
          <Icon name="plus" size={18} /> Создать абонемент
        </button>

        {types.length === 0
          ? <div className="empty"><span className="empty-emoji">🔍</span>Ничего не нашлось</div>
          : types.map((t) => (
            <div key={t.id} className="card tap" onClick={() => setDetail(t)}>
              <div className="row-between">
                <div className="grow">
                  <div style={{ fontWeight: 600 }} className="ellipsis">{t.name}</div>
                  <div className="subtle" style={{ marginTop: 2 }}>
                    {visitsLabel(t.visits_count)}{daysLabel(t.days) ? ' · ' + daysLabel(t.days) : ''}
                    {t.is_trial ? ' · пробный' : ''}
                  </div>
                </div>
                <span className="amount" style={{ whiteSpace: 'nowrap', marginLeft: 10 }}>{fmtMoney(t.price)}</span>
              </div>
            </div>
          ))}

        {detail && <SubTypeSheet type={detail} onClose={() => setDetail(null)} />}
        {creating && <NewSubTypeSheet onClose={() => setCreating(false)} onDone={reload} />}
      </div>
    );
  };

  // ── Создание нового типа абонемента ──────────────────────
  // POST /api/subscription-types (право subscription_types.manage — есть у
  // старшего оператора). branch_id обязателен (1=Импульс, 2=Чемпион).
  function NewSubTypeSheet({ onClose, onDone }) {
    const [name, setName] = useState('');
    const [branchId, setBranchId] = useState('1');
    const [price, setPrice] = useState('');
    const [visits, setVisits] = useState('');
    const [days, setDays] = useState('31');
    const [isTrial, setIsTrial] = useState(false);
    const [publicLk, setPublicLk] = useState(true);
    const [description, setDescription] = useState('');
    const [saving, setSaving] = useState(false);
    const [err, setErr] = useState(null);

    async function save() {
      if (!name.trim()) { setErr('Введите название'); return; }
      if (!price || Number(price) <= 0) { setErr('Укажите цену'); return; }
      if (!visits || Number(visits) <= 0) { setErr('Укажите количество занятий'); return; }
      setSaving(true); setErr(null);
      try {
        await window.api.subTypes.create({
          name: name.trim(),
          branch_id: Number(branchId),
          price: Number(price),
          visits_count: Number(visits),
          days: Number(days) || 31,
          is_trial: isTrial,
          public_in_lk: publicLk,
          description: description.trim() || null,
        });
        window.toast('Абонемент создан', 'ok');
        onDone && onDone();
        onClose();
      } catch (e) {
        setErr(e.message || 'Не удалось создать абонемент');
      } finally { setSaving(false); }
    }

    return (
      <Sheet title="Новый абонемент" onClose={onClose}
        footer={<>
          <button className="btn btn-ghost" onClick={onClose} disabled={saving}>Отмена</button>
          <button className="btn btn-primary" onClick={save} disabled={saving}>{saving ? 'Сохранение…' : 'Создать'}</button>
        </>}>
        <div className="field">
          <label>Название</label>
          <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Например: Импульс 8" />
        </div>
        <div className="field">
          <label>Филиал</label>
          <div className="seg">
            {[['1', 'Импульс'], ['2', 'Чемпион']].map(([k, l]) => (
              <button key={k} type="button" className={'seg-btn' + (branchId === k ? ' active' : '')} onClick={() => setBranchId(k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="btn-row">
          <div className="field" style={{ flex: 1, marginBottom: 14 }}>
            <label>Цена, ₽</label>
            <input className="input" inputMode="decimal" value={price}
              onChange={(e) => setPrice(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0" />
          </div>
          <div className="field" style={{ flex: 1, marginBottom: 14 }}>
            <label>Занятий</label>
            <input className="input" inputMode="numeric" value={visits}
              onChange={(e) => setVisits(e.target.value.replace(/[^0-9]/g, ''))} placeholder="0" />
          </div>
        </div>
        <div className="field">
          <label>Срок действия, дней</label>
          <input className="input" inputMode="numeric" value={days}
            onChange={(e) => setDays(e.target.value.replace(/[^0-9]/g, ''))} />
        </div>
        <div className="seg" style={{ marginBottom: 14 }}>
          <button type="button" className={'seg-btn' + (isTrial ? ' active' : '')} onClick={() => setIsTrial((v) => !v)}>Пробный</button>
          <button type="button" className={'seg-btn' + (publicLk ? ' active' : '')} onClick={() => setPublicLk((v) => !v)}>Виден в ЛК</button>
        </div>
        <div className="field">
          <label>Описание (необязательно)</label>
          <textarea className="input" rows={3} value={description}
            onChange={(e) => setDescription(e.target.value)} style={{ resize: 'vertical' }} />
        </div>
        {err && <div className="badge danger" style={{ display: 'block', padding: '10px 12px' }}>{err}</div>}
      </Sheet>
    );
  }

  function SubTypeSheet({ type, onClose }) {
    return (
      <Sheet title={type.name} onClose={onClose}
        footer={<button className="btn btn-primary" onClick={onClose}>Закрыть</button>}>
        <div className="card" style={{ background: 'var(--surface-2)', marginBottom: 12 }}>
          <div className="row-between"><span className="muted">Цена</span>
            <span className="amount" style={{ fontSize: 18 }}>{fmtMoney(type.price)}</span></div>
          <hr className="hr" />
          <div className="row-between"><span className="muted">Занятий</span><span>{type.visits_count || 'безлимит'}</span></div>
          {daysLabel(type.days) && <><hr className="hr" />
            <div className="row-between"><span className="muted">Срок действия</span><span>{daysLabel(type.days)}</span></div></>}
          <hr className="hr" />
          <div className="row-between"><span className="muted">Филиал</span><span>{BRANCH[type.branch_id] || '—'}</span></div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: type.description ? 12 : 0 }}>
          {type.is_trial && <span className="badge info">Пробный</span>}
          {type.public_in_lk && <span className="badge ok">Виден в ЛК</span>}
          {type.show_in_widget && <span className="badge">В виджете</span>}
        </div>
        {type.description && <div className="subtle" style={{ lineHeight: 1.5 }}>{type.description}</div>}
      </Sheet>
    );
  }
})();