// Article.jsx - vista de artículo
const { ImagePlaceholder, SectionDot, ListItem, pickTone, AdSlot, resolveAuthor } = window.CS_Common;

function ArticleView({ id, onNav, saved, toggleSave }) {
  const articles = window.CS_DATA.articles;
  const article = articles.find(a => a.id === id) || articles[0];
  if (!article) {
    return (
      <div className="cs-view">
        <div className="cs-container" style={{ padding: '72px 0 120px' }}>
          <button className="cs-back-btn" onClick={() => onNav({ view: 'home' })}>← Volver</button>
          <h1 style={{ fontFamily: 'var(--serif)', fontSize: 56, letterSpacing: '-0.04em', margin: '20px 0 8px' }}>
            Sin publicaciones
          </h1>
          <p style={{ color: 'var(--mute)', fontSize: 18 }}>Todavía no hay noticias publicadas en el periódico digital.</p>
        </div>
      </div>
    );
  }
  const author = resolveAuthor(article);
  const section = window.CS_DATA.sections.find(s => s.slug === article.section);
  const body = article.body || window.CS_DATA.longBody;
  const isSaved = saved.includes(article.id);

  const related = articles.filter(a => a.section === article.section && a.id !== article.id).slice(0, 3);
  if (related.length < 3) {
    articles.filter(a => a.id !== article.id).slice(0, 3 - related.length).forEach(a => {
      if (!related.find(r => r.id === a.id)) related.push(a);
    });
  }

  const [readProgress, setReadProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setReadProgress(Math.min(1, h.scrollTop / max));
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="cs-view cs-article">
      {/* progreso de lectura */}
      <div style={{
        position: 'fixed', top: 0, left: 0, height: 3,
        background: 'var(--brand-orange)', width: `${readProgress * 100}%`,
        zIndex: 200, transition: 'width 0.1s',
      }}></div>

      <div style={{ maxWidth: 1180, margin: '0 auto 28px' }}>
        <AdSlot size="leaderboard" label="Anuncio institucional" sponsor="Pauta superior · Artículo" />
      </div>

      <div className="cs-article-head">
        <div className="cs-article-kicker" style={{ color: section?.color }}>
          ▸ {article.kicker}
        </div>
        <h1 className="cs-article-title">{article.title}</h1>
        <p className="cs-article-dek">{article.dek}</p>
        <div className="cs-article-byline">
          <div className={`cs-avatar ${author.tone}`}>{author.avatar}</div>
          <div className="info">
            <span className="name" onClick={() => onNav({ view: 'author', slug: author.slug })}>Por {author.name}</span>
            <span className="meta">{author.role} · {article.date} · {article.readMin} min de lectura</span>
          </div>
        </div>
      </div>

      <div className="cs-article-hero">
        <ImagePlaceholder src={article.imageUrl} tone={pickTone(article)} caption={article.hero?.caption || `Imagen del reportaje: ${article.kicker}`} />
      </div>

      <div className="cs-article-body-wrap">
        <div className="cs-article-tools">
          <button
            className={`cs-tool-btn ${isSaved ? 'is-active' : ''}`}
            onClick={() => toggleSave(article.id)}
            title={isSaved ? "Quitar de guardados" : "Guardar para leer luego"}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill={isSaved ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
            </svg>
          </button>
          <button className="cs-tool-btn" title="Compartir">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
              <path d="m8.59 13.51 6.83 3.98M15.41 6.51 8.59 10.49"/>
            </svg>
          </button>
          <button className="cs-tool-btn" title="Comentarios">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </button>
          <button className="cs-tool-btn" title="Imprimir">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
              <rect width="12" height="8" x="6" y="14"/>
            </svg>
          </button>
          <button className="cs-tool-btn" title="Escuchar artículo">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
              <path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
            </svg>
          </button>
        </div>

        <div className="cs-article-body">
          {body.map((b, i) => {
            if (b.type === 'p') return <p key={i}>{b.text}</p>;
            if (b.type === 'subhead') return <h3 key={i} className="subhead">{b.text}</h3>;
            if (b.type === 'pullquote') return <blockquote key={i} className="pullquote">"{b.text}"</blockquote>;
            return null;
          })}

          {/* AD: Anuncio dentro del artículo */}
          <div style={{ margin: '36px 0' }}>
            <AdSlot size="inline" label="Espacio publicitario" sponsor="Anuncio dentro del artículo" />
          </div>

          <div style={{
            marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--line)',
            display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'
          }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)' }}>
              Etiquetas:
            </span>
            {['Cibao', 'Inversión', 'Industria', 'ProDominicana', 'Desarrollo Regional'].map(t => (
              <span key={t} style={{
                padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 999,
                fontSize: 12, fontFamily: 'var(--sans)', cursor: 'pointer'
              }}>#{t}</span>
            ))}
          </div>

          {/* Vista previa de comentarios */}
          <div style={{ marginTop: 40, padding: '24px 0', borderTop: '1px solid var(--line)' }}>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', margin: '0 0 18px' }}>
              Comentarios · 47
            </h3>
            <div style={{
              padding: 16, border: '1px solid var(--line)', borderRadius: 4, background: 'var(--card)',
              marginBottom: 14
            }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 }}>
                <div className="cs-avatar green" style={{ width: 32, height: 32, fontSize: 12 }}>CF</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Carolina Fernández</div>
                  <div style={{ fontSize: 11, color: 'var(--mute)', fontFamily: 'var(--mono)' }}>Hace 2 horas</div>
                </div>
              </div>
              <p style={{ fontSize: 15, margin: 0, lineHeight: 1.5 }}>
                Excelente reportaje. Llevamos años hablando del potencial del Cibao y por fin alguien lo aterriza con números reales y entrevistas en terreno.
              </p>
            </div>
            <div style={{
              padding: 16, border: '1px solid var(--line)', borderRadius: 4, background: 'var(--card)',
            }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 }}>
                <div className="cs-avatar blue" style={{ width: 32, height: 32, fontSize: 12 }}>EM</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Eduardo Mejía</div>
                  <div style={{ fontSize: 11, color: 'var(--mute)', fontFamily: 'var(--mono)' }}>Hace 4 horas</div>
                </div>
              </div>
              <p style={{ fontSize: 15, margin: 0, lineHeight: 1.5 }}>
                Soy de San José de las Matas. La sección sobre el crecimiento desigual es exactamente lo que vivimos aquí. Gracias por incluirnos.
              </p>
            </div>
          </div>
        </div>

        <div className="cs-article-side">
          <AdSlot size="mediumRect" label="Anuncio lateral" sponsor="Pauta · Artículo" />
          <div className="side-card">
            <h5 style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', margin: '0 0 12px' }}>
              Sobre el autor
            </h5>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
              <div className={`cs-avatar ${author.tone}`} style={{ width: 48, height: 48, fontSize: 18 }}>{author.avatar}</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, fontFamily: 'var(--serif)' }}>{author.name}</div>
                <div style={{ fontSize: 12, color: 'var(--mute)' }}>{author.role}</div>
              </div>
            </div>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.45 }}>
              {author.bio}
            </p>
            <button
              className="cs-rail-cta"
              style={{ background: 'var(--ink)', marginTop: 14 }}
              onClick={() => onNav({ view: 'author', slug: author.slug })}
            >
              Ver perfil completo
            </button>
          </div>

          <div className="side-card" style={{ background: 'var(--bg-alt)' }}>
            <h5 style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', margin: '0 0 12px' }}>
              Boletín Semanal
            </h5>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 14, margin: '0 0 14px', lineHeight: 1.4 }}>
              Recibe los cinco reportajes más importantes de la semana cada domingo a las 7am.
            </p>
            <input type="email" placeholder="tu@correo.com" style={{
              width: '100%', padding: '10px 12px', border: '1px solid var(--line)',
              borderRadius: 3, fontFamily: 'var(--sans)', fontSize: 13, marginBottom: 8, background: '#fff'
            }} />
            <button className="cs-rail-cta">Suscribirme gratis</button>
          </div>
        </div>
      </div>

      {/* AD: Debajo del artículo */}
      <div style={{ maxWidth: 1100, margin: '40px auto 0' }}>
        <AdSlot size="billboard" label="Anuncio institucional" sponsor="Pauta inferior · Artículo" />
      </div>

      {/* Artículos relacionados */}
      <div style={{ maxWidth: 1100, margin: '60px auto 0', padding: '0 0' }}>
        <div className="cs-section-head" style={{ borderBottomColor: 'var(--ink)' }}>
          <span className="cs-kicker" style={{ color: 'var(--mute)' }}>Sigue leyendo</span>
          <h2>Relacionados en {section?.name}</h2>
        </div>
        <div className="cs-cat-list">
          {related.map(a => <window.CS_Common.CatCard key={a.id} article={a} onNav={onNav} />)}
        </div>
      </div>
    </div>
  );
}

window.CS_Article = ArticleView;