// Home.jsx - portada del periódico
const { ImagePlaceholder, SectionDot, ListItem, StripCard, CatCard, Byline, pickTone, AdSlot, resolveAuthor } = window.CS_Common;

function HeroMega({ article, onNav }) {
  return (
    <div className="cs-hero">
      <div className="cs-hero-image" onClick={() => onNav({ view: 'article', id: article.id })}>
        <ImagePlaceholder src={article.imageUrl} tone="default" caption={article.hero?.caption || "Foto"} />
      </div>
      <div className="cs-hero-content">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <SectionDot slug={article.section} />
          <span className={`cs-kicker cs-tag-${article.section}`}>{article.kicker}</span>
          <span className="cs-kicker" style={{ background: 'var(--brand-orange)', color: '#fff', padding: '3px 8px', borderRadius: 2 }}>
            {article.tag}
          </span>
        </div>
        <h1 className="cs-hero-title" onClick={() => onNav({ view: 'article', id: article.id })}>
          {article.title}
        </h1>
        <p className="cs-hero-dek">{article.dek}</p>
        <Byline authorSlug={article.author} date={article.date} readMin={article.readMin} onNav={onNav} />
      </div>
    </div>
  );
}

function FeaturedStrip({ articles, onNav }) {
  const cleanArticles = articles.filter(Boolean);
  return (
    <div className="cs-featured-strip">
      {cleanArticles.map((a, i) => (
        <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
          <StripCard article={a} onNav={onNav} />
        </div>
      ))}
    </div>
  );
}

function TrendingRail({ articles, onNav }) {
  const cleanArticles = articles.filter(Boolean);
  return (
    <div className="rail-card">
      <h4 className="rail-title">
        <span className="icon">▲</span> Tendencias · Más leído hoy
      </h4>
      {cleanArticles.map((a, i) => (
        <div key={a.id} className="cs-trending-item" onClick={() => onNav({ view: 'article', id: a.id })}>
          <div className="cs-trending-num">{String(i + 1).padStart(2, '0')}</div>
          <div>
            <h5>{a.title}</h5>
            <div className="views">› {(28 - i * 3.2).toFixed(1)}k lecturas · {a.readMin} min</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function SavedRail({ saved, onNav }) {
  const allArticles = window.CS_DATA.articles;
  const savedArticles = saved.map(id => allArticles.find(a => a.id === id)).filter(Boolean);
  return (
    <div className="rail-card cs-bookmark-card">
      <h4 className="rail-title">
        <span className="icon">▣</span> Tu lectura guardada
      </h4>
      {savedArticles.length === 0 ? (
        <div className="cs-bookmark-empty">
          Guarda artículos con el ícono de marcador para leerlos después. Tu colección aparecerá aquí.
        </div>
      ) : (
        <div>
          {savedArticles.slice(0, 4).map(a => (
            <div key={a.id} className="cs-saved-item" onClick={() => onNav({ view: 'article', id: a.id })}>
              <div className="title">{a.title}</div>
              <div className="meta">{a.kicker} · {a.readMin} min</div>
            </div>
          ))}
          <button className="cs-rail-cta">Ver toda mi biblioteca →</button>
        </div>
      )}
    </div>
  );
}

function WeatherRail() {
  const { weather, fx } = window.CS_DATA;
  return (
    <div className="rail-card cs-weather-card">
      <h4 className="rail-title">Clima &amp; Mercado</h4>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase' }}>
        {weather.city}
      </div>
      <div className="cs-weather-temp">
        <span className="num">{weather.tempC}</span>
        <span className="unit">°C</span>
      </div>
      <div className="cs-weather-cond">{weather.icon} {weather.cond}</div>
      <div className="cs-weather-meta">
        <span>Máx 33° · Mín 24°</span>
        <span>Humedad 78%</span>
      </div>
      <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.15)' }}>
        {fx.map(f => (
          <div key={f.code} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '6px 0', fontFamily: 'var(--mono)', fontSize: 13 }}>
            <span style={{ color: 'rgba(255,255,255,0.7)' }}>{f.code}/DOP</span>
            <span>
              <b style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>{f.sell.toFixed(2)}</b>
              <span style={{ marginLeft: 8, fontSize: 11, color: f.delta >= 0 ? '#6FE39A' : '#FF8E8E' }}>
                {f.delta >= 0 ? '▲' : '▼'} {Math.abs(f.delta).toFixed(2)}
              </span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function OpinionStrip({ articles, onNav }) {
  const cleanArticles = articles.filter(Boolean);
  return (
    <div className="cs-opinion">
      <div className="cs-container">
        <div className="cs-opinion-grid">
          <div>
            <div className="cs-opinion-title">
              Opinión
              <span className="sub">La voz editorial</span>
            </div>
          </div>
          {cleanArticles.map(a => {
            const author = resolveAuthor(a);
            return (
              <div key={a.id} className="cs-opinion-card" onClick={() => onNav({ view: 'article', id: a.id })}>
                <div className="name" onClick={(e) => { e.stopPropagation(); onNav({ view: 'author', slug: author.slug }); }}>
                  › {author.name}
                </div>
                <h4>«{a.title}»</h4>
                <div style={{ fontSize: 12, color: 'var(--mute)', fontFamily: 'var(--sans)' }}>
                  {a.date} · {a.readMin} min de lectura
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function SectionBlock({ title, slug, articles, onNav, more = true }) {
  if (articles.length === 0) return null;
  const featured = articles[0];
  const rest = articles.slice(1, 4);
  return (
    <div>
      <div className="cs-section-head">
        <span className="cs-kicker" style={{ color: 'var(--mute)' }}>Sección</span>
        <h2 style={{ color: window.CS_DATA.sections.find(s => s.slug === slug)?.color }}>{title}</h2>
        {more && (
          <span className="more" onClick={() => onNav({ view: 'category', slug })}>
            Ver toda la sección →
          </span>
        )}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36 }}>
        <div className="cs-strip-card" onClick={() => onNav({ view: 'article', id: featured.id })}>
          <div className="image" style={{ aspectRatio: '16/10', borderRadius: 4, overflow: 'hidden' }}>
            <ImagePlaceholder src={featured.imageUrl} tone={pickTone(featured)} caption={featured.kicker} />
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 12 }}>
            <SectionDot slug={featured.section} />
            <span className={`cs-kicker cs-tag-${featured.section}`}>{featured.kicker}</span>
          </div>
          <h3 style={{ fontSize: 28, fontFamily: 'var(--serif)', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '8px 0 10px' }}>
            {featured.title}
          </h3>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.4, color: 'var(--ink-2)', margin: 0 }}>
            {featured.dek}
          </p>
        </div>
        <div>
          {rest.map(a => <ListItem key={a.id} article={a} onNav={onNav} />)}
        </div>
      </div>
    </div>
  );
}

function HomeView({ onNav, saved }) {
  const articles = window.CS_DATA.articles;
  if (!articles.length) {
    return (
      <div className="cs-view">
        <div className="cs-container">
          <div style={{ padding: '72px 0 120px', borderBottom: '1px solid var(--line)' }}>
            <div className="cs-kicker" style={{ color: 'var(--brand-blue)', marginBottom: 14 }}>
              Conexión Semanal
            </div>
            <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(42px, 8vw, 92px)', lineHeight: 0.95, letterSpacing: '-0.05em', margin: 0 }}>
              Periódico en preparación
            </h1>
            <p style={{ maxWidth: 560, margin: '20px 0 0', fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.35, color: 'var(--ink-2)' }}>
              Aún no hay publicaciones disponibles. Usa la consola administrativa para alimentar y publicar nuevas noticias.
            </p>
          </div>
        </div>
      </div>
    );
  }
  const semanal = articles.find(a => a.featured === 'mega') || articles[0];
  const restArticles = articles.filter(a => a.id !== semanal.id);
  const featuredStrip = restArticles.slice(0, 3);

  const trending = restArticles.slice(3, 8);
  const opinion = articles.filter(a => a.section === 'opinion').slice(0, 3);

  const politicaBase = articles.filter(a => a.section === 'politica' || a.section === 'internacionales');
  const economiaBase = articles.filter(a => a.section === 'economia' || a.section === 'tecnologia');
  const grupo3Base = articles.filter(a => a.section === 'deportes');
  const grupo4Base = articles.filter(a => a.section === 'cultura');

  const politicaList = politicaBase.length ? politicaBase.slice(0, 4) : restArticles.slice(4, 8);
  const economiaList = economiaBase.length ? economiaBase.slice(0, 4) : restArticles.slice(8, 12);
  const grupo3 = grupo3Base.length ? grupo3Base : restArticles.slice(12, 18);
  const grupo4 = grupo4Base.length ? grupo4Base : restArticles.slice(18, 24);
  const politicaTitle = politicaBase.length ? 'Política' : 'Actualidad Nacional';
  const economiaTitle = economiaBase.length ? 'Economía y Negocios' : 'Más noticias';
  const grupo3Title = grupo3Base.length ? 'Deportes' : 'Nacionales';
  const grupo4Title = grupo4Base.length ? 'Cultura' : 'Últimas publicaciones';
  const grupo3Color = grupo3Base.length ? 'var(--c-deportes)' : 'var(--c-nacionales)';
  const grupo4Color = grupo4Base.length ? 'var(--c-cultura)' : 'var(--brand-blue)';
  const grupo3Slug = grupo3Base.length ? 'deportes' : 'nacionales';
  const grupo4Slug = grupo4Base.length ? 'cultura' : 'nacionales';

  return (
    <div className="cs-view">
      <div className="cs-leaderboard-wrap">
        <div className="cs-container">
          <AdSlot size="leaderboard" label="Tu marca puede acompañar al periodismo dominicano" sponsor="Espacio institucional disponible" />
        </div>
      </div>
      <div className="cs-container">
        {/* Portada principal - La Semanal */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '28px 0 4px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ width: 28, height: 1, background: 'var(--brand-blue)' }}></div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--brand-blue)', fontWeight: 600 }}>
            La Semanal · Edición Especial
          </span>
          <span style={{ flex: 1, height: 1, background: 'var(--line)' }}></span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--mute)', letterSpacing: '0.06em' }}>
            › Reportaje exclusivo
          </span>
        </div>
        <HeroMega article={semanal} onNav={onNav} />
        <FeaturedStrip articles={featuredStrip} onNav={onNav} />

        {/* Anuncio destacado */}
        <div className="cs-reveal" style={{ margin: '32px 0 8px' }}>
          <AdSlot size="billboard" label="Anuncio institucional destacado" sponsor="Pauta principal · Portada" />
        </div>

        {/* Cuadrícula principal */}
        <div className="cs-main-grid cs-reveal">
          <div className="cs-col">
            <h3 className="col-title">
              {politicaTitle}
              <span className="index">— 01</span>
            </h3>
            <div className="col-list">
              {politicaList.map(a => (
                <ListItem key={a.id} article={a} onNav={onNav} showThumb />
              ))}
            </div>
          </div>
          <div className="cs-col">
            <h3 className="col-title">
              {economiaTitle}
              <span className="index">— 02</span>
            </h3>
            <div className="col-list">
              {economiaList.map(a => (
                <ListItem key={a.id} article={a} onNav={onNav} showThumb />
              ))}
            </div>
          </div>
          <div className="cs-rail">
            <TrendingRail articles={trending} onNav={onNav} />
            <AdSlot size="mediumRect" label="Anuncio lateral" sponsor="Pauta institucional" />
            <SavedRail saved={saved} onNav={onNav} />
            <WeatherRail />
            <AdSlot size="halfPage" label="Espacio premium" sponsor="Media página · Columna derecha" />
          </div>
        </div>
      </div>

      {opinion.length > 0 && <OpinionStrip articles={opinion} onNav={onNav} />}

      {/* Franja de aliados institucionales */}
      <div className="cs-sponsor-strip cs-reveal">
        <div className="cs-container">
          <div className="label">› Aliados institucionales de esta edición</div>
          <div className="cs-sponsor-grid">
            <div className="cs-sponsor-slot"><span>Logo institucional · 1</span></div>
            <div className="cs-sponsor-slot"><span>Logo institucional · 2</span></div>
            <div className="cs-sponsor-slot"><span>Logo institucional · 3</span></div>
            <div className="cs-sponsor-slot"><span>Logo institucional · 4</span></div>
            <div className="cs-sponsor-slot"><span>Logo institucional · 5</span></div>
          </div>
        </div>
      </div>

      <div className="cs-container">
        <div className="cs-section-head cs-reveal">
          <span className="cs-kicker" style={{ color: 'var(--mute)' }}>Sección</span>
          <h2 style={{ color: grupo3Color }}>{grupo3Title}</h2>
          <span className="more" onClick={() => onNav({ view: 'category', slug: grupo3Slug })}>Ver toda la sección →</span>
        </div>
        <div className="cs-cat-list">
          {grupo3.map((a, i) => (
            <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
              <CatCard article={a} onNav={onNav} />
            </div>
          ))}
          {articles[5] && <div className="cs-reveal" data-delay="4"><CatCard article={articles[5]} onNav={onNav} /></div>}
        </div>

        {/* Anuncio entre secciones */}
        <div className="cs-reveal" style={{ margin: '40px 0 24px' }}>
          <AdSlot size="banner" label="Anuncio institucional · Edición digital" sponsor="Pauta entre secciones" />
        </div>

        <div className="cs-section-head cs-reveal">
          <span className="cs-kicker" style={{ color: 'var(--mute)' }}>Sección</span>
          <h2 style={{ color: grupo4Color }}>{grupo4Title}</h2>
          <span className="more" onClick={() => onNav({ view: 'category', slug: grupo4Slug })}>Ver toda la sección →</span>
        </div>
        <div className="cs-cat-list">
          {grupo4.map((a, i) => (
            <div key={a.id} className="cs-reveal" data-delay={(i % 5) + 1}>
              <CatCard article={a} onNav={onNav} />
            </div>
          ))}
          {articles[6] && <div className="cs-reveal" data-delay="3"><CatCard article={articles[6]} onNav={onNav} /></div>}
        </div>
      </div>
    </div>
  );
}

window.CS_Home = HomeView;