// screen-teachers.jsx — справочник тренеров/арендаторов: поиск, фильтр по типу,
// тап → карточка (тип, школа, должности, телефоны, соцсети, группы).
// GET /api/teachers (list), GET /api/teachers/:id (карточка + groups).
(() => {
  const { useState, useMemo } = React;
  const { initials, telHref } = window.M;
  const SCHOOL = { impulse: 'Импульс', champion: 'Чемпион' };

  function tname(t) {
    if (t.is_collective && t.collective_name) return t.collective_name;
    return [t.last_name, t.first_name, t.middle_name].filter(Boolean).join(' ').trim() || 'Без имени';
  }
  function shortUrl(s) { return String(s).replace(/^https?:\/\//, '').replace(/\/$/, '').slice(0, 28); }

  window.TeachersScreen = function TeachersScreen() {
    // Только те, кто реально в сетке расписания (исключает «плоских» арендаторов
    // раздела «Аренда» — кофемат, офисы, ИП и т.п.).
    const st = window.useAsync(() => window.api.teachers.list({ in_schedule: 'true' }), []);
    const { data, loading, error, reload } = st;
    const [q, setQ] = useState('');
    const [filter, setFilter] = useState('all');
    const [openId, setOpenId] = useState(null);

    const list = useMemo(() => {
      let arr = Array.isArray(data) ? data : (data && data.items) || [];
      arr = arr.filter((t) => t.active !== false);
      if (filter === 'coach') arr = arr.filter((t) => t.coach_type !== 'Арендатор');
      else if (filter === 'tenant') arr = arr.filter((t) => t.coach_type === 'Арендатор');
      const query = q.trim().toLowerCase();
      if (query) arr = arr.filter((t) =>
        tname(t).toLowerCase().includes(query) || (t.phones || []).some((p) => String(p).includes(query)));
      return arr.slice().sort((a, b) => tname(a).localeCompare(tname(b), 'ru'));
    }, [data, q, filter]);

    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', 'Все'], ['coach', 'Тренеры'], ['tenant', 'Арендаторы']].map(([k, label]) => (
            <button key={k} className={'seg-btn' + (filter === k ? ' active' : '')} onClick={() => setFilter(k)}>{label}</button>
          ))}
        </div>

        {list.length === 0
          ? <div className="empty"><span className="empty-emoji">🔍</span>Никого не нашлось</div>
          : list.map((t) => (
            <div key={t.id} className="card tap" onClick={() => setOpenId(t.id)}>
              <div className="card-row">
                <div className="avatar">{initials(tname(t))}</div>
                <div className="grow">
                  <div style={{ fontWeight: 600 }} className="ellipsis">{tname(t)}</div>
                  <div className="subtle">{t.coach_type || 'Тренер'}{t.school ? ' · ' + (SCHOOL[t.school] || t.school) : ''}</div>
                </div>
                <Icon name="chevronRight" size={20} className="muted" />
              </div>
            </div>
          ))}

        {openId && <TeacherSheet id={openId} onClose={() => setOpenId(null)} />}
      </div>
    );
  };

  function TeacherSheet({ id, onClose }) {
    const st = window.useAsync(() => window.api.teachers.get(id), [id]);
    const { data: t, loading, error } = st;
    const disciplines = (t && Array.isArray(t.schedule_disciplines)) ? t.schedule_disciplines : [];

    return (
      <Sheet title="Карточка тренера" onClose={onClose}
        footer={<button className="btn btn-primary" onClick={onClose}>Закрыть</button>}>
        {loading && <Spinner />}
        {error && <div className="badge danger" style={{ display: 'block', padding: '10px 12px' }}>{error}</div>}
        {t && (
          <>
            <div className="card-row" style={{ marginBottom: 12 }}>
              <div className="avatar" style={{ width: 54, height: 54, fontSize: 20 }}>{initials(tname(t))}</div>
              <div className="grow">
                <div style={{ fontWeight: 700, fontSize: 17 }} className="ellipsis">{tname(t)}</div>
                <div style={{ marginTop: 4, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  <span className="badge">{t.coach_type || 'Тренер'}</span>
                  {t.school && <span className="badge accent">{SCHOOL[t.school] || t.school}</span>}
                  {t.is_collective && <span className="badge info">Коллектив</span>}
                </div>
              </div>
            </div>

            {(t.post || []).filter(Boolean).length > 0 &&
              <div className="subtle" style={{ marginBottom: 12 }}>{(t.post || []).filter(Boolean).join(', ')}</div>}

            {(t.phones || []).filter(Boolean).map((p, i) => (
              <div key={'p' + i} className="row-between" style={{ padding: '8px 0', borderTop: '1px solid var(--border)' }}>
                <span className="mono">{p}</span>
                <a className="btn btn-sm btn-ghost" href={telHref(p)} style={{ width: 'auto' }}>
                  <Icon name="phone" size={16} /> Позвонить
                </a>
              </div>
            ))}
            {(t.emails || []).filter(Boolean).map((e, i) => (
              <div key={'e' + i} className="row-between" style={{ padding: '8px 0', borderTop: '1px solid var(--border)' }}>
                <span className="mono ellipsis">{e}</span>
                <a className="btn btn-sm btn-ghost" href={'mailto:' + e} style={{ width: 'auto' }}>Письмо</a>
              </div>
            ))}

            {(t.social_pages || []).filter(Boolean).length > 0 && (
              <div style={{ marginTop: 12 }}>
                <div className="subtle" style={{ marginBottom: 6 }}>Соцсети</div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {(t.social_pages || []).filter(Boolean).map((s, i) => (
                    <a key={'s' + i} className="badge" href={s.startsWith('http') ? s : 'https://' + s}
                      target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>{shortUrl(s)}</a>
                  ))}
                </div>
              </div>
            )}

            {disciplines.length > 0 && (
              <div style={{ marginTop: 14 }}>
                <div className="subtle" style={{ marginBottom: 6 }}>Дисциплины в расписании</div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {disciplines.map((d, i) => <span key={i} className="badge">{d}</span>)}
                </div>
              </div>
            )}

            {t.description && <div className="subtle" style={{ marginTop: 14, lineHeight: 1.5 }}>{t.description}</div>}
          </>
        )}
      </Sheet>
    );
  }
})();