/* Общие хуки и состояния для всех поверхностей. Дизайн — атомы из _ds_bundle. */
(() => {
  const DS = window.MyceliumMusicDesignSystem_45bb27;
  const A = window.MM_ASSETS_BASE || '/assets';

  /** Одноразовая вставка CSS компонента (в бандле хелпер не экспортирован). */
  function ensureStyle(id, css) {
    if (document.getElementById(id)) return;
    const s = document.createElement('style');
    s.id = id;
    s.textContent = css;
    document.head.appendChild(s);
  }

  /** Живое состояние плеера в React-компоненте. */
  function usePlayer() {
    const [st, setSt] = React.useState(window.MMPlayer.state);
    React.useEffect(() => window.MMPlayer.subscribe(setSt), []);
    return st;
  }

  /** Вход + первая загрузка данных. Возвращает {phase, tracks, playlists, reload}. */
  function useBoot() {
    const [state, setState] = React.useState({ phase: 'loading', tracks: [], playlists: [] });
    const reload = React.useCallback(async () => {
      try {
        await window.MM.ensureAuth();
        const [tracks, playlists] = await Promise.all([window.MM.library(), window.MM.playlists()]);
        setState({ phase: 'ready', tracks, playlists });
      } catch (e) {
        console.error('загрузка:', e.message);
        setState((s) => ({ ...s, phase: 'error', reason: e.message }));
      }
    }, []);
    React.useEffect(() => { reload(); }, [reload]);
    return { ...state, reload };
  }

  function CenterState({ img, title, text, children }) {
    return <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:12, padding:'32px 24px', textAlign:'center'}}>
      {img && <img src={img} alt="" width={160} style={{mixBlendMode:'multiply'}}/>}
      {title && <div style={{fontSize:'var(--text-l)', fontWeight:'var(--weight-semibold)'}}>{title}</div>}
      {text && <div style={{fontSize:'var(--text-s)', color:'var(--text-muted)', maxWidth:260}}>{text}</div>}
      {children}
    </div>;
  }

  const Loading = () => <CenterState img={`${A}/mascots2/unicorn-rest.png`} title="Просыпаемся…"
    text="Собираем вашу музыку"/>;

  const BOT = 'https://t.me/muhomorspace_music_bot';

  /**
   * Ошибка загрузки.
   *
   * Отдельный случай — заход снаружи Telegram: это не поломка, а человек,
   * пришедший по ссылке. Пугать его «что-то пошло не так» нельзя, ему нужно
   * показать дверь: приложение живёт внутри мессенджера.
   */
  const LoadError = ({ reason, onRetry }) => {
    const needsTelegram = /Telegram/i.test(reason || '');
    if (needsTelegram) {
      return <CenterState img={`${A}/mascots2/unicorn-welcome.png`}
        title="Музыка живёт в Telegram"
        text="Приложение открывается из чата с ботом — там ваша фонотека, плеер и импорт.">
        <DS.Button onClick={() => window.open(BOT, '_blank')}>Открыть бота</DS.Button>
      </CenterState>;
    }
    return <CenterState img={`${A}/mascots2/unicorn-error.png`}
      title="Что-то пошло не так" text={reason || 'Ничего не сломалось — просто повтори действие'}>
      {onRetry && <DS.Button onClick={onRetry}>Повторить</DS.Button>}
    </CenterState>;
  };

  window.MMUI = { usePlayer, useBoot, CenterState, Loading, LoadError, ensureStyle };
})();