// Pages.jsx - Categoría, Autor, Búsqueda
const { ImagePlaceholder, SectionDot, ListItem, CatCard, pickTone, AnimatedNumber, AdSlot, resolveAuthor } = window.CS_Common;

function CategoryView({ slug, onNav }) {
  const section = window.CS_DATA.sections.find(s => s.slug === slug) || window.CS_DATA.sections[1];
  const all = window.CS_DATA.articles;
  const sectionArticles = all.filter(a => a.section === slug);
  // If empty, mix with related
  const articles = sectionArticles.length > 0 ? sectionArticles : all.slice(0, 6);
  if (!articles.length) {
    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' }}>
            Sección sin publicaciones
          </h1>
          <p style={{ color: 'var(--mute)', fontSize: 18 }}>No hay noticias publicadas en esta sección.</p>
        </div>
      </div>
    );
  }
  const feature = articles[0];
  const rest = articles.slice(1);
  const moreFromRelated = all.filter(a => a.section !== slug).slice(0, Math.max(0, 6 - rest.length));
  const grid = [...rest, ...moreFromRelated].slice(0, 9);

  const sectionTaglines = {
    'la-semanal': 'Las historias que marcan la semana. Reportajes profundos, crónicas y análisis exclusivos.',
    'politica': 'La actualidad del Congreso, el Ejecutivo y las instituciones que definen el rumbo del país.',
    'economia': 'Mercado, finanzas, banca central, empresa privada y políticas públicas que mueven la economía dominicana.',
    'nacionales': 'Las noticias que pasan en cada barrio, cada provincia, cada calle de la República Dominicana.',
    'internacionales': 'El mundo desde el Caribe. Análisis y reportajes con mirada dominicana.',
    'deportes': 'Beisbol invernal, fútbol nacional, boxeo y todos los deportes que vibran en el país.',
    'tecnologia': 'Innovación, startups, ciencia y la transformación digital del Caribe.',
    'opinion': 'Voces editoriales, columnistas invitados y la línea editorial de Conexión Semanal.',
    'cultura': 'Música, literatura, cine, gastronomía y tradiciones. La identidad dominicana viva.',
    'vida-salud': 'Salud pública, bienestar, alimentación y políticas sanitarias.',
    'clima': 'Tiempo, alertas, fenómenos atmosféricos y reporte diario de Onamet.',
  };

  return (
    <div className="cs-view">
      <div className="cs-leaderboard-wrap">
        <div className="cs-container">
          <AdSlot size="leaderboard" label="Anuncio institucional" sponsor={`Sección · ${section.name}`} />
        </div>
      </div>
      <div className="cs-container">
        <div className="cs-cat-hero">
          <div className="cs-cat-eyebrow" style={{ color: section.color }}>
            ▸ Sección · {String(window.CS_DATA.sections.findIndex(s => s.slug === slug) + 1).padStart(2, '0')}
          </div>
          <h1 className="cs-cat-title" style={{ color: section.color }}>{section.name}</h1>
          <p className="cs-cat-dek">{sectionTaglines[slug]}</p>
          <div className="cs-cat-stats">
            <span>Artículos<b><AnimatedNumber value={articles.length * 14 + 12} /></b></span>
            <span>Esta semana<b><AnimatedNumber value={articles.length} /></b></span>
            <span>Editores<b><AnimatedNumber value={4} /></b></span>
            <span>Lecturas hoy<b><AnimatedNumber value={parseFloat((articles.length * 1.8).toFixed(1))} format={n => n.toFixed(1) + 'k'} /></b></span>
          </div>
        </div>

        {/* Filtros */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)', marginRight: 6 }}>
            Filtrar:
          </span>
          {['Todo', 'Últimas 24h', 'Esta semana', 'Reportajes', 'Análisis', 'Crónica', 'Más leído'].map((f, i) => (
            <button key={f} className={`cs-filter-chip ${i === 0 ? 'active' : ''}`}>{f}</button>
          ))}
          <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--mute)' }}>
            Ordenar por: <b style={{ color: 'var(--ink)' }}>Más reciente ▾</b>
          </span>
        </div>

        {/* Destacado */}
        <div className="cs-cat-feature">
          <div className="image">
            <ImagePlaceholder tone={pickTone(feature)} caption={feature.hero?.caption || feature.kicker} />
          </div>
          <div onClick={() => onNav({ view: 'article', id: feature.id })} style={{ cursor: 'pointer' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 4 }}>
              <SectionDot slug={feature.section} />
              <span className={`cs-kicker cs-tag-${feature.section}`}>{feature.kicker}</span>
              <span style={{ padding: '3px 8px', background: 'var(--brand-orange)', color: '#fff', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, borderRadius: 2 }}>
                Destacado
              </span>
            </div>
            <h2>{feature.title}</h2>
            <p>{feature.dek}</p>
            <div style={{ fontSize: 13, color: 'var(--mute)', fontFamily: 'var(--sans)' }}>
              {resolveAuthor(feature).name} · {feature.date} · {feature.readMin} min de lectura
            </div>
          </div>
        </div>

        {/* Cuadrícula */}
        <div className="cs-cat-list">
          {grid.slice(0, 6).map((a, i) => (
            <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
              <CatCard article={a} onNav={onNav} />
            </div>
          ))}
        </div>

        {/* AD: Mid-section banner */}
        {grid.length > 6 && (
          <div className="cs-reveal" style={{ margin: '40px 0' }}>
            <AdSlot size="banner" label="Anuncio institucional" sponsor={`Pauta · ${section.name}`} />
          </div>
        )}

        <div className="cs-cat-list">
          {grid.slice(6).map((a, i) => (
            <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
              <CatCard article={a} onNav={onNav} />
            </div>
          ))}
        </div>

        {/* Paginación */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '40px 0', alignItems: 'center' }}>
          <button className="cs-filter-chip">← Anterior</button>
          {[1, 2, 3, 4, 5].map(n => (
            <button key={n} className={`cs-filter-chip ${n === 1 ? 'active' : ''}`} style={{ minWidth: 36, justifyContent: 'center' }}>{n}</button>
          ))}
          <span style={{ fontFamily: 'var(--mono)', color: 'var(--mute)', padding: '0 8px' }}>…</span>
          <button className="cs-filter-chip">14</button>
          <button className="cs-filter-chip">Siguiente →</button>
        </div>
      </div>
    </div>
  );
}

function AuthorView({ slug, onNav }) {
  const matchingArticles = window.CS_DATA.articles.filter(a => a.author === slug);
  const author = window.CS_DATA.authors[slug] || (matchingArticles[0] ? resolveAuthor(matchingArticles[0]) : window.CS_DATA.authors['magnolia-valdez']);
  const articles = matchingArticles.length ? matchingArticles : window.CS_DATA.articles.filter(a => a.author === author.slug);
  const others = window.CS_DATA.articles.filter(a => a.author !== author.slug).slice(0, 6 - articles.length);
  const all = [...articles, ...others].slice(0, 6);
  if (!all.length) {
    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' }}>
            Autor sin publicaciones
          </h1>
          <p style={{ color: 'var(--mute)', fontSize: 18 }}>Todavía no hay artículos disponibles para mostrar.</p>
        </div>
      </div>
    );
  }
  const featured = all[0];

  return (
    <div className="cs-view">
      <div className="cs-author-hero">
        <div className="cs-author-inner">
          <div className={`cs-author-avatar ${author.tone}`}>{author.avatar}</div>
          <div>
            <h1 className="cs-author-name">{author.name}</h1>
            <div className="cs-author-role">▸ {author.role} · Conexión Semanal</div>
            <p className="cs-author-bio">{author.bio}</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <button className="cs-subscribe" style={{ padding: '8px 16px', fontSize: 12 }}>+ Seguir autor</button>
              <button className="cs-bookmark-pill" style={{ padding: '8px 14px' }}>✉ Boletín del autor</button>
            </div>
          </div>
          <div className="cs-author-stats">
            <div className="cs-author-stat">Artículos publicados<b><AnimatedNumber value={author.stats.articles} /></b></div>
            <div className="cs-author-stat">En Conexión desde<b>{author.stats.since}</b></div>
            <div className="cs-author-stat">Seguidores<b><AnimatedNumber value={parseFloat((author.stats.articles * 28 / 1000).toFixed(1))} format={n => n.toFixed(1) + 'k'} /></b></div>
          </div>
        </div>
      </div>

      <div className="cs-container">
        <div className="cs-section-head">
          <span className="cs-kicker" style={{ color: 'var(--mute)' }}>Su trabajo más reciente</span>
          <h2>Publicaciones</h2>
          <span className="count">▸ {articles.length} en esta página · {author.stats.articles} en total</span>
        </div>

        <div className="cs-cat-feature">
          <div className="image">
            <ImagePlaceholder tone={pickTone(featured)} caption={featured.kicker} />
          </div>
          <div onClick={() => onNav({ view: 'article', id: featured.id })} style={{ cursor: 'pointer' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 4 }}>
              <SectionDot slug={featured.section} />
              <span className={`cs-kicker cs-tag-${featured.section}`}>{featured.kicker}</span>
            </div>
            <h2>{featured.title}</h2>
            <p>{featured.dek}</p>
            <div style={{ fontSize: 13, color: 'var(--mute)' }}>{featured.date} · {featured.readMin} min de lectura</div>
          </div>
        </div>

        <div className="cs-cat-list">
          {all.slice(1).map((a, i) => (
            <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
              <CatCard article={a} onNav={onNav} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SearchView({ q: initialQ = '', onNav }) {
  const [q, setQ] = React.useState(initialQ);
  const [section, setSection] = React.useState('todos');
  const articles = window.CS_DATA.articles;

  const results = React.useMemo(() => {
    let r = articles;
    if (q.trim()) {
      const qq = q.toLowerCase();
      r = r.filter(a =>
        a.title.toLowerCase().includes(qq) ||
        a.dek.toLowerCase().includes(qq) ||
        a.kicker.toLowerCase().includes(qq)
      );
    }
    if (section !== 'todos') r = r.filter(a => a.section === section);
    return r;
  }, [q, section]);

  function highlight(text, query) {
    if (!query.trim()) return text;
    const parts = text.split(new RegExp(`(${query})`, 'gi'));
    return parts.map((p, i) =>
      p.toLowerCase() === query.toLowerCase() ? <mark key={i}>{p}</mark> : p
    );
  }

  return (
    <div className="cs-view cs-search-page">
      <div style={{ marginBottom: 12, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--mute)' }}>
        ▸ Búsqueda
      </div>
      <div className="cs-search-input-wrap">
        <input
          autoFocus
          className="cs-search-input"
          placeholder="Buscar en Conexión Semanal..."
          value={q}
          onChange={e => setQ(e.target.value)}
        />
      </div>
      <div className="cs-search-stats">
        ▸ {results.length} {results.length === 1 ? 'resultado' : 'resultados'} {q ? `para "${q}"` : 'recientes'} · Búsqueda en titulares, sumarios y secciónes
      </div>

      <div className="cs-search-filters">
        <button className={`cs-filter-chip ${section === 'todos' ? 'active' : ''}`} onClick={() => setSection('todos')}>
          Todas las secciónes
        </button>
        {window.CS_DATA.sections.map(s => (
          <button
            key={s.slug}
            className={`cs-filter-chip ${section === s.slug ? 'active' : ''}`}
            onClick={() => setSection(s.slug)}
            style={section === s.slug ? { background: s.color, borderColor: s.color, color: '#fff' } : {}}
          >
            {s.name}
          </button>
        ))}
      </div>

      {results.length === 0 ? (
        <div style={{ padding: 80, textAlign: 'center', color: 'var(--mute)', fontFamily: 'var(--serif)', fontSize: 18 }}>
          Ningún artículo coincide con tu búsqueda. Probá con otros términos.
        </div>
      ) : (
        results.map(a => {
          const author = resolveAuthor(a);
          return (
            <div key={a.id} className="cs-search-result" onClick={() => onNav({ view: 'article', id: a.id })}>
              <div className="image"><ImagePlaceholder tone={pickTone(a)} caption={a.kicker.split(' · ')[0]} /></div>
              <div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
                  <SectionDot slug={a.section} />
                  <span className={`cs-kicker cs-tag-${a.section}`}>{a.kicker}</span>
                </div>
                <h3>{highlight(a.title, q)}</h3>
                <p>{highlight(a.dek, q)}</p>
                <div style={{ fontSize: 12, color: 'var(--mute)', fontFamily: 'var(--sans)', display: 'flex', gap: 8 }}>
                  <span>{author?.name}</span><span>·</span><span>{a.date}</span><span>·</span><span>{a.readMin} min</span>
                </div>
              </div>
            </div>
          );
        })
      )}
    </div>
  );
}

window.CS_Pages = { CategoryView, AuthorView, SearchView };