/* Сайт-плеер 1280 — кит ui_kits/web с живыми данными: настоящая библиотека,
   плейлисты, импорт и звук. Вёрстка кита не тронута. */
(() => {
  const { Button, Icon, IconButton, Logo, Badge, Input, Cover,
          TrackRow, SeekBar, Transport } = window.MyceliumMusicDesignSystem_45bb27;
  const { usePlayer, useBoot, CenterState, Loading, LoadError, ensureStyle } = window.MMUI;
  const MM = window.MM;
  const A = window.MM_ASSETS_BASE || '/assets';
  const fmt = MM.fmt;

const CSS = `
.mm-web{width:1280px;min-height:800px;margin:0 auto;background:var(--surface-page);display:flex;flex-direction:column;font-family:var(--font-body)}
.mm-nav-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:var(--radius-pill);cursor:pointer;font-size:15px;font-weight:600;color:var(--text-body);transition:background var(--dur-fast) var(--ease-out)}
.mm-nav-item:hover{background:var(--surface-tint)}
.mm-nav-item.on{background:var(--mm-pink);color:#fff;box-shadow:0 3px 0 var(--mm-pink-3d)}
.mm-pl-card{cursor:pointer;border-radius:20px;background:var(--surface-card);border:1px solid var(--border-soft);box-shadow:var(--shadow-card);padding:14px;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.mm-pl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
`;

const PL_ART = ['cover-night.png', 'cover-ocean.png', 'cover-spectrum.png'];
const KIND_DESC = { links: 'пополняется импортом', profile: 'зеркало профиля Telegram', user: 'ваш список' };

function WebPlayer() {
  ensureStyle('mm-web-css', CSS);
  const boot = useBoot();
  const player = usePlayer();
  const [nav, setNav] = React.useState('music');
  const [q, setQ] = React.useState('');
  const [liked, setLiked] = React.useState(() => new Set());
  const [plTracks, setPlTracks] = React.useState(null); // открытый плейлист

  const tracks = boot.tracks;
  React.useEffect(() => { setLiked(MM.likes.fromTracks(tracks)); }, [tracks]);
  const track = player.current || tracks[0] || null;

  const idx = (arr) => arr.findIndex((t) => t.id === player.current?.id);
  const play = (t) => window.MMPlayer.play(t);
  const scope = plTracks?.tracks?.length ? plTracks.tracks : tracks;
  const next = () => scope.length && play(scope[(idx(scope) + 1) % scope.length]);
  const prev = () => scope.length && play(scope[(idx(scope) - 1 + scope.length) % scope.length]);
  React.useEffect(() => { window.MMPlayer.hooks.onEnded = next; });

  const toggleLike = (id) => {
    setLiked((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
    MM.toggleLike(id).catch(() => {});
  };

  const openPlaylist = async (p) => {
    setNav('playlists'); setPlTracks({ loading: true, name: p.name });
    try { setPlTracks(await MM.playlist(p.id)); }
    catch (e) { setPlTracks({ error: e.message, name: p.name }); }
  };

  let list = nav === 'liked' ? tracks.filter((t) => liked.has(t.id))
    : nav === 'playlists' && plTracks?.tracks ? plTracks.tracks : tracks;
  if (q.trim()) list = list.filter((t) => (t.title + ' ' + t.artist).toLowerCase().includes(q.trim().toLowerCase()));

  const H = { music: 'МОЯ МУЗЫКА', playlists: plTracks?.name ? plTracks.name.toUpperCase() : 'ПЛЕЙЛИСТЫ', liked: 'ЛЮБИМОЕ', import: 'ИМПОРТ' }[nav];
  const pls = boot.playlists;

  if (boot.phase === 'loading') return <div className="mm-web"><Loading/></div>;
  if (boot.phase === 'error') return <div className="mm-web"><LoadError reason={boot.reason} onRetry={boot.reload}/></div>;

  return <div className="mm-web">
    <header style={{display:'flex', alignItems:'center', gap:24, padding:'16px 28px', borderBottom:'1px solid var(--border-soft)', background:'rgba(255,255,255,.6)'}}>
      <Logo size={15} base={A}/>
      <Input icon="search" placeholder="Трек, исполнитель или плейлист" value={q} onChange={setQ} onClear={() => setQ('')} style={{flex:1, maxWidth:440}}/>
      <span style={{flex:1}}></span>
      <Badge>{tracks.length} {plural(tracks.length)} в библиотеке</Badge>
      <span style={{width:40, height:40, borderRadius:'50%', background:'var(--mm-tint-violet)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="user" size={20} color="var(--mm-violet)"/></span>
    </header>
    <div style={{flex:1, display:'flex', minHeight:0}}>
      <aside style={{width:236, flex:'none', padding:'20px 14px 0', display:'flex', flexDirection:'column', gap:4, borderRight:'1px solid var(--border-soft)'}}>
        {[['music', 'music', 'Моя музыка'], ['playlists', 'list', 'Плейлисты'], ['liked', 'heart', 'Любимое'], ['import', 'download', 'Импорт']].map(([k, ic, label]) =>
          <div key={k} className={`mm-nav-item${nav === k ? ' on' : ''}`} onClick={() => { setNav(k); setPlTracks(null); }}><Icon name={ic} size={19}/>{label}</div>)}
        {pls.length > 0 && <div style={{margin:'14px 14px 6px', fontSize:11, fontWeight:700, letterSpacing:'.08em', color:'var(--text-muted)'}}>ПЛЕЙЛИСТЫ</div>}
        {pls.slice(0, 6).map((p) => <div key={p.id} className="mm-nav-item" style={{height:38, fontWeight:500, fontSize:14}} onClick={() => openPlaylist(p)}>{p.name}</div>)}
        <span style={{flex:1}}></span>
        <img src={`${A}/mascots2/unicorn-rest.png`} alt="" style={{width:190, alignSelf:'center', mixBlendMode:'multiply'}}/>
      </aside>
      <main style={{flex:1, minWidth:0, padding:'24px 28px 20px', overflowY:'auto'}}>
        <div className="mm-h" style={{fontSize:'var(--display-l)'}}>{H}</div>
        <span className="mm-dash"></span>
        {nav === 'import' ? <ImportPane onDone={boot.reload}/> : <React.Fragment>
          {nav === 'music' && <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, margin:'20px 0 26px'}}>
            {pls.slice(0, 3).map((p, i) => <div key={p.id} className="mm-pl-card" onClick={() => openPlaylist(p)}>
              <img src={`${A}/covers/${PL_ART[i % PL_ART.length]}`} style={{width:'100%', aspectRatio:'1', objectFit:'cover', borderRadius:14, display:'block'}} alt=""/>
              <div style={{fontWeight:700, fontSize:15, marginTop:10}}>{p.name}</div>
              <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>{p.count} {plural(p.count)} · {KIND_DESC[p.kind] || 'ваш список'}</div>
            </div>)}
            <div className="mm-pl-card" style={{display:'flex', flexDirection:'column'}}>
              <img src={`${A}/covers/covers-grid.png`} style={{width:'100%', borderRadius:14, display:'block'}} alt=""/>
              <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', gap:0, paddingTop:8}}>
                <span className="mm-h" style={{fontSize:30}}>{tracks.length}</span>
                <span style={{fontSize:12, color:'var(--text-muted)'}}>{plural(tracks.length)} — вся коллекция</span>
              </div>
            </div>
          </div>}
          {plTracks?.loading && <Loading/>}
          {plTracks?.error && <LoadError reason={plTracks.error}/>}
          <div style={{margin:'14px -12px 0'}}>
            {list.map((t) => <TrackRow key={t.id} title={t.title} artist={t.artist} duration={fmt(t.dur)} seed={t.id + t.title}
              playing={player.current?.id === t.id && player.playing} liked={liked.has(t.id)} onClick={() => play(t)} onLike={() => toggleLike(t.id)}/>)}
            {list.length === 0 && !plTracks?.loading && <div style={{padding:'30px 12px', display:'flex', alignItems:'center', gap:20}}>
              <img src={`${A}/mascots2/unicorn-empty.png`} alt="" width={170} style={{mixBlendMode:'multiply'}}/>
              <div><div style={{fontWeight:700, fontSize:17}}>Пока пусто</div><div style={{fontSize:13, color:'var(--text-muted)', marginTop:4}}>Добавь первый трек — и музыка появится здесь</div></div>
            </div>}
          </div>
        </React.Fragment>}
      </main>
    </div>
    {track && <footer style={{flex:'none', display:'flex', alignItems:'center', gap:18, padding:'12px 24px', background:'rgba(255,255,255,.85)', backdropFilter:'blur(10px)', borderTop:'1px solid var(--border-soft)', boxShadow:'0 -8px 30px rgba(240,46,130,.08)'}}>
      <Cover seed={track.id + track.title} size={52}/>
      <div style={{width:190}}>
        <div style={{fontWeight:700, fontSize:14, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{track.title}</div>
        <div style={{fontSize:12, color:'var(--text-muted)'}}>{track.artist}</div>
      </div>
      <Transport playing={player.playing} liked={liked.has(track.id)}
        onPlay={() => player.current ? window.MMPlayer.toggle() : play(track)}
        onPrev={prev} onNext={next} onLike={() => toggleLike(track.id)} style={{gap:8}}/>
      <SeekBar value={(player.dur || track.dur) ? player.pos / (player.dur || track.dur) : 0}
        onChange={(v) => window.MMPlayer.seek(v)}
        current={fmt(player.pos)} total={fmt(player.dur || track.dur)} style={{flex:1}}/>
      <Icon name="volume" size={20} color="var(--text-muted)"/>
    </footer>}
  </div>;
}

function ImportPane({onDone}) {
  const [url, setUrl] = React.useState('');
  const [job, setJob] = React.useState(null);
  const [error, setError] = React.useState(null);
  const timer = React.useRef(null);
  React.useEffect(() => () => clearInterval(timer.current), []);

  const start = async () => {
    setError(null);
    try {
      const j = await MM.importUrl(url.trim());
      setJob(j);
      timer.current = setInterval(async () => {
        try {
          const cur = await MM.importJob(j.id);
          setJob(cur);
          if (['done', 'duplicate', 'failed'].includes(cur.status)) {
            clearInterval(timer.current);
            if (cur.status !== 'failed') onDone && onDone();
          }
        } catch { /* следующий тик */ }
      }, 1500);
    } catch (e) { setError(e.message); }
  };

  const running = job && ['queued', 'running'].includes(job.status);
  const ok = job && ['done', 'duplicate'].includes(job.status);

  return <div style={{maxWidth:520, marginTop:20, display:'flex', flexDirection:'column', gap:14}}>
    <div style={{fontSize:14, color:'var(--text-muted)'}}>Вставь ссылку на трек — соберём его в твою библиотеку. Музыка из YouTube, VK Видео и Rutube.</div>
    <Input icon="link" placeholder="https://youtube.com/watch…" value={url} onChange={setUrl}/>
    <Button chevron icon={<Icon name="download" size={18}/>} disabled={running || !url.trim()} onClick={start}>Импортировать</Button>
    {running && <div style={{display:'flex', alignItems:'center', gap:10, fontSize:14, color:'var(--text-muted)'}}>
      <span style={{width:16, height:16, border:'2px solid var(--mm-pink-100)', borderTopColor:'var(--mm-pink)', borderRadius:'50%', display:'inline-block', animation:'mm-spin .8s linear infinite'}}/>
      {job.stage || 'идёт…'}
    </div>}
    {ok && <div style={{fontSize:14, color:'var(--mm-mint-deep)', fontWeight:600}}>Готово — трек в библиотеке{job.status === 'duplicate' ? ' (уже был)' : ''}</div>}
    {(error || job?.status === 'failed') && <div style={{fontSize:14, color:'var(--mm-amanita)', fontWeight:600}}>{error || job.error || 'Не получилось'}</div>}
    <img src={`${A}/mascots2/unicorn-import.png`} alt="" width={170} style={{mixBlendMode:'multiply', alignSelf:'center'}}/>
  </div>;
}

function plural(n) {
  const m10 = n % 10, m100 = n % 100;
  if (m10 === 1 && m100 !== 11) return 'трек';
  if (m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14)) return 'трека';
  return 'треков';
}

  window.MMWeb = { WebPlayer };
})();