/* Layvtime — Canal Layvtime: partidos Liga MX EN VIVO y GRATIS + programas (El Argüende, LAYV10).
   Contenido basado en el canal real (youtube.com/@Layvtime): "Aquí el fútbol no se narra. Se vive." */

function Poster({ h = 180, r = 12, label, kind, style }) {
  const bg = kind === 'stadium'
    ? `linear-gradient(180deg, rgba(10,10,12,0.2), rgba(10,10,12,0.85)), url(${window.LT_ASSETS.bg}) center/cover`
    : kind === 'hero'
    ? `linear-gradient(180deg, rgba(10,10,12,0.15), rgba(10,10,12,0.9)), url(${window.LT_ASSETS.hero}) center/cover`
    : 'repeating-linear-gradient(135deg, #15151b 0 12px, #1a1a22 12px 24px)';
  return (
    <div style={{ width: '100%', height: h, borderRadius: r, position: 'relative', overflow: 'hidden', background: bg, ...style }}>
      {label && <span style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, letterSpacing: 0.5, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', fontWeight: 600 }}>{label}</span>}
    </div>
  );
}

// Programas reales del canal
const PROGRAMS = [
  { name: 'El Argüende Futbolero', sub: 'Debate y opinión sin filtros', when: 'Lun 9:00 PM', live: false, tag: 'Show' },
  { name: 'LAYV10', sub: 'Las noticias del fútbol en minutos', when: 'Diario', live: false, tag: 'Noticias' },
  { name: 'La Previa', sub: 'Rumbo al partido del día', when: 'Antes de cada juego', live: false, tag: null },
  { name: 'Reacciones en vivo', sub: 'Vive el gol con la comunidad', when: 'Durante los partidos', live: true, tag: 'En vivo' },
];

const CLIPS = [
  { title: 'Reacción al golazo · América vs Chivas', dur: '1:24', views: '212K' },
  { title: 'El Argüende: ¿quién merece el título?', dur: '12:08', views: '156K' },
  { title: 'LAYV10: lo último de la Selección Mexicana', dur: '4:32', views: '98K' },
];

function ChannelScreen({ go }) {
  const CF = window.CF, T = CF.teams;
  const [seg, setSeg] = React.useState('vivo');
  const matches = CF.liveMatches;
  const featured = matches.find((m) => m.status === 'live');
  // Video real fijado en la portada (YouTube Layvtime). Al darle play abre el video real.
  const VIDEO_ID = 'X2ed9IL6EhA';
  const WATCH = 'https://www.youtube.com/watch?v=' + VIDEO_ID;
  const THUMB = 'https://img.youtube.com/vi/' + VIDEO_ID + '/maxresdefault.jpg';
  const EMBED = 'https://www.youtube-nocookie.com/embed/' + VIDEO_ID + '?autoplay=1&rel=0&playsinline=1&modestbranding=1&iv_load_policy=3&controls=0&disablekb=1&fs=0&color=white';
  const [playing, setPlaying] = React.useState(false);
  const openVideo = () => window.open(WATCH, '_blank', 'noopener');

  return (
    <div className="animate-slide-up">
      {/* Header principal */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '50px 18px 12px', flexShrink: 0 }}>
        <img src={window.LT_ASSETS.logo} alt="Layvtime" style={{ height: 22, width: 'auto' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LiveBadge />
          <button onClick={() => go('notif')} style={{ width: 36, height: 36, borderRadius: 999, background: C.secondary, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative' }}><Icon name="bell" size={17} color={C.mut} /><span style={{ position: 'absolute', top: 8, right: 9, width: 7, height: 7, borderRadius: 9, background: C.primary, border: '1.5px solid hsl(var(--surface))' }} /></button>
        </div>
      </div>

      <div style={{ padding: '0 18px 24px' }}>
        {/* Reproductor: embebido al darle play (HTTPS) */}
        <div style={{ borderRadius: 16, overflow: 'hidden', border: `1px solid ${C.cardBorder}`, marginBottom: 12 }}>
          {playing ? (
            <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', background: '#000' }}>
              <iframe src={EMBED} title="Layvtime" referrerPolicy="origin" allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }} />
            </div>
          ) : (
          <div onClick={() => setPlaying(true)} style={{ position: 'relative', cursor: 'pointer' }}>
            <div style={{ width: '100%', height: 210, position: 'relative', overflow: 'hidden', background: '#000' }}>
              <img src={THUMB} alt="Layvtime" onError={(e) => { e.target.style.display = 'none'; }} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 40%, rgba(0,0,0,0.6))' }} />
            </div>
            <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 7, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: C.destructive, color: '#fff', borderRadius: 6, padding: '4px 9px', fontWeight: 800, fontSize: 11 }}><LiveDot size={6} color="#fff" />EN VIVO</span>
              <span style={{ fontSize: 10.5, fontWeight: 800, color: '#1a1505', background: 'hsl(var(--gold))', padding: '4px 8px', borderRadius: 6 }}>GRATIS</span>
            </div>
            <div style={{ position: 'absolute', top: 12, right: 12, display: 'flex', gap: 6, alignItems: 'center', fontSize: 11, color: '#fff', fontWeight: 700, background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(6px)', padding: '4px 10px', borderRadius: 6 }}>
              <Icon name="user" size={13} /> 187K
            </div>
            <div style={{ position: 'absolute', left: '50%', top: '44%', transform: 'translate(-50%,-50%)', width: 62, height: 62, borderRadius: 999, background: C.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 40px hsl(var(--primary) / 0.55)' }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff"><path d="M8 5.5v13l11-6.5z" /></svg>
            </div>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '22px 14px 12px', background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.55))' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Crest team={featured.home} size={26} />
                <span className="num" style={{ fontWeight: 900, fontSize: 20, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.9)' }}>{featured.hs} - {featured.as}</span>
                <Crest team={featured.away} size={26} />
                <span style={{ marginLeft: 'auto', fontSize: 12, color: 'rgba(255,255,255,0.85)', display: 'flex', alignItems: 'center', gap: 6 }}><span className="num" style={{ color: C.destructive, fontWeight: 700 }}>{featured.minute}'</span> Reacciones en vivo</span>
              </div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', marginTop: 5 }}>{T[featured.home].name} vs {T[featured.away].name} · Liga MX J14</div>
            </div>
          </div>
          )}
          {!playing
            ? <button onClick={() => setPlaying(true)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: C.primary, color: '#fff', border: 'none', padding: '12px', fontFamily: 'inherit', fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M8 5.5v13l11-6.5z" /></svg> Ver transmisión
              </button>
            : <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '10px 14px' }}>
                <button onClick={() => setPlaying(false)} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'transparent', border: `1px solid ${C.border}`, color: C.mut, borderRadius: 8, padding: '5px 11px', fontFamily: 'inherit', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}><Icon name="x" size={13} /> Cerrar</button>
              </div>}
        </div>

        {/* tagline */}
        <div style={{ textAlign: 'center', fontSize: 12.5, color: C.mut, fontWeight: 600, marginBottom: 16, fontStyle: 'italic' }}>Aquí el fútbol no se narra. <span style={{ color: C.fg }}>Se vive.</span></div>

        {/* segmentos */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
          {[['vivo', 'Partidos'], ['shows', 'Programas'], ['clips', 'Clips']].map(([k, l]) => (
            <button key={k} onClick={() => setSeg(k)} style={{ flex: 1, padding: '9px', borderRadius: 10, fontFamily: 'inherit', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', border: `1px solid ${seg === k ? C.primary : C.border}`, background: seg === k ? C.primary : 'transparent', color: seg === k ? '#fff' : C.mut }}>{l}</button>
          ))}
        </div>

        {seg === 'vivo' && (
          <div>
            <SectionHead title="Partidos de hoy" sub="Liga MX · en vivo y gratis" icon="radio" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {matches.map((m) => (
                <Card key={m.id} pad={12} onClick={() => go('match', m.id)} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 50, flexShrink: 0, textAlign: 'center' }}>
                    {m.status === 'live'
                      ? <span className="num" style={{ color: C.destructive, fontWeight: 800, fontSize: 13 }}>{m.minute}'</span>
                      : <span className="num" style={{ color: C.mut, fontWeight: 700, fontSize: 12.5 }}>{m.kickoff}</span>}
                  </div>
                  <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
                    {[['home', 'hs'], ['away', 'as']].map(([s, sc]) => (
                      <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <Crest team={m[s]} size={22} />
                        <span style={{ flex: 1, fontWeight: 600, fontSize: 13.5 }}>{T[m[s]].name}</span>
                        {m.status === 'live' && <span className="num" style={{ fontWeight: 800, fontSize: 15 }}>{m[sc]}</span>}
                      </div>
                    ))}
                    <OddsBarCompact odds={m.odds} />
                  </div>
                  {m.status === 'live'
                    ? <button onClick={(e) => { e.stopPropagation(); openVideo(); }} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5, background: C.primary, color: '#fff', border: 'none', borderRadius: 9, padding: '8px 13px', fontFamily: 'inherit', fontWeight: 700, fontSize: 12.5, cursor: 'pointer' }}><svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M8 5.5v13l11-6.5z" /></svg>Ver</button>
                    : <button onClick={(e) => e.stopPropagation()} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5, background: 'transparent', color: C.mut, border: `1px solid ${C.border}`, borderRadius: 9, padding: '8px 11px', fontFamily: 'inherit', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}><Icon name="bell" size={13} />Aviso</button>}
                </Card>
              ))}
            </div>
            <div style={{ marginTop: 14, padding: 13, borderRadius: 12, background: 'hsl(var(--gold) / 0.08)', border: '1px solid hsl(var(--gold) / 0.2)', display: 'flex', gap: 11, alignItems: 'center' }}>
              <Icon name="star" size={18} color={C.gold} style={{ flexShrink: 0 }} />
              <span style={{ fontSize: 12.5, color: C.fg, lineHeight: 1.45 }}>Más de <b>50 partidos por torneo</b> de Liga MX, Femenil y Selección — sin narración tradicional.</span>
            </div>
          </div>
        )}

        {seg === 'shows' && (
          <div>
            <SectionHead title="Programas Layvtime" sub="Producciones del canal" icon="star" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {PROGRAMS.map((p, i) => (
                <Card key={i} pad={0} onClick={openVideo} style={{ overflow: 'hidden' }}>
                  <div style={{ display: 'flex' }}>
                    <div style={{ width: 110, flexShrink: 0, position: 'relative' }}>
                      <Poster h={92} r={0} kind={i % 2 === 0 ? 'stadium' : 'plain'} />
                      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <div style={{ width: 30, height: 30, borderRadius: 999, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg width="13" height="13" viewBox="0 0 24 24" fill="#fff"><path d="M8 5.5v13l11-6.5z" /></svg></div>
                      </div>
                    </div>
                    <div style={{ flex: 1, padding: 12, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                        <span style={{ fontWeight: 800, fontSize: 14 }}>{p.name}</span>
                        {p.live && <LiveBadge small />}
                      </div>
                      <div style={{ fontSize: 12, color: C.mut, marginTop: 2, textWrap: 'pretty' }}>{p.sub}</div>
                      <div style={{ fontSize: 11.5, color: C.mut, marginTop: 6, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="clock" size={12} />{p.when}</div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        )}

        {seg === 'clips' && (
          <div>
            <SectionHead title="Clips destacados" sub="Lo más visto" icon="fire" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {CLIPS.map((cl, i) => (
                <Card key={i} pad={10} onClick={openVideo} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{ width: 100, flexShrink: 0, position: 'relative' }}>
                    <Poster h={60} r={9} kind={i === 0 ? 'hero' : 'plain'} />
                    <span style={{ position: 'absolute', right: 5, bottom: 4, fontSize: 10, fontWeight: 700, color: '#fff', background: 'rgba(0,0,0,0.7)', padding: '1px 5px', borderRadius: 4 }} className="num">{cl.dur}</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5, lineHeight: 1.3, textWrap: 'pretty' }}>{cl.title}</div>
                    <div style={{ fontSize: 11.5, color: C.mut, marginTop: 4, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="user" size={12} />{cl.views} vistas</div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ChannelScreen, Poster });