/*
  social.jsx — Sección "Redes" compacta
  --------------------------------------------------------------------------
  · YouTube  → AUTOMÁTICO: lee el feed RSS público del canal (vía proxy CORS)
               y muestra los 3 videos más recientes, con miniatura real.
  · TikTok / Instagram → mosaico compacto de 3 tiles que abren el perfil.
               (IG y TikTok bloquean leer "últimos posts" desde un sitio
               estático; si más adelante hay URLs de posts o un agregador
               tipo Behold/Curator, se conectan aquí en `posts`.)

  Diseño: 3 columnas (una por red), cada una con header (icono · handle ·
  "Ver perfil") y una fila de 3 miniaturas cuadradas. Compacto y uniforme.
*/

// Redes (handles/URLs no dependen del idioma)
const SF_NETWORKS = [
  {
    platform: 'youtube',
    name: 'Emiliano Centenero',
    handle: '@emiliano_centenero',
    url: 'https://www.youtube.com/@emiliano_centenero',
    channelId: 'UCCf5ta_rkpfM5eoFiNjjCsg',
    auto: true,
  },
  {
    platform: 'tiktok',
    name: 'ecentenero',
    handle: '@ecentenero',
    url: 'https://www.tiktok.com/@ecentenero',
    posts: [], // [{ url, thumb }]
  },
  {
    platform: 'instagram',
    name: 'emiliano_centenero',
    handle: '@emiliano_centenero',
    url: 'https://www.instagram.com/emiliano_centenero',
    posts: [], // [{ url, thumb }]
  },
];

const SF_ICONS = {
  instagram: (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.7" />
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7" />
      <circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" />
    </svg>
  ),
  tiktok: (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M16 3v2.2A5 5 0 0 0 21 10v2.4a7.2 7.2 0 0 1-5-2v6.4a5.4 5.4 0 1 1-5.4-5.4c.3 0 .6 0 .9.1V14a3 3 0 1 0 2.1 2.9V3H16Z" fill="currentColor" />
    </svg>
  ),
  youtube: (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="2" y="5.5" width="20" height="13" rx="3.5" stroke="currentColor" strokeWidth="1.7" />
      <path d="M10.3 9.3v5.4l4.6-2.7-4.6-2.7Z" fill="currentColor" />
    </svg>
  ),
};

const SF_LABEL = { instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube' };

// Proxies CORS para leer el RSS de YouTube desde el navegador (con fallback).
// codetabs primero: es el más fiable en este contexto.
const SF_PROXIES = [
  (u) => `https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(u)}`,
  (u) => `https://api.allorigins.win/raw?url=${encodeURIComponent(u)}`,
  (u) => `https://corsproxy.io/?url=${encodeURIComponent(u)}`,
];

async function sfFetchYouTube(channelId) {
  const rss = `https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`;
  for (const make of SF_PROXIES) {
    try {
      const ctrl = new AbortController();
      const tid = setTimeout(() => ctrl.abort(), 7000);
      const res = await fetch(make(rss), { signal: ctrl.signal });
      clearTimeout(tid);
      if (!res.ok) continue;
      const text = await res.text();
      const xml = new DOMParser().parseFromString(text, 'text/xml');
      const entries = Array.from(xml.getElementsByTagName('entry')).slice(0, 3);
      const out = entries.map((en) => {
        const idEl = en.getElementsByTagName('yt:videoId')[0] || en.getElementsByTagName('videoId')[0];
        const id = idEl && idEl.textContent;
        const titleEl = en.getElementsByTagName('title')[0];
        const title = titleEl ? titleEl.textContent : '';
        return id ? { id, title, url: `https://www.youtube.com/watch?v=${id}`, thumb: `https://i.ytimg.com/vi/${id}/mqdefault.jpg` } : null;
      }).filter(Boolean);
      if (out.length) return out;
    } catch (e) { /* siguiente proxy */ }
  }
  return null;
}

// Una miniatura
function SfTile({ post, platform, label }) {
  return (
    <a className="sfeed-tile" href={post.url} target="_blank" rel="noopener noreferrer" title={post.title || `Ver en ${label}`}>
      <div className="sfeed-tile-media">
        {post.thumb
          ? <img src={post.thumb} alt="" loading="lazy" />
          : <span className="sfeed-tile-mark" aria-hidden="true">{SF_ICONS[platform]}</span>}
        <span className="sfeed-tile-badge" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M7 5l8 5-8 5V5Z" fill="currentColor" /></svg>
        </span>
        {post.title && (
          <span className="sfeed-tile-cap"><span>{post.title}</span></span>
        )}
      </div>
    </a>
  );
}

function SfSkeleton() {
  return <span className="sfeed-tile sfeed-tile-skel" aria-hidden="true"><span className="sfeed-tile-media" /></span>;
}

function SocialColumn({ net, t }) {
  const isAuto = !!net.auto;
  const [posts, setPosts] = React.useState(isAuto ? null : (net.posts || []));
  const [failed, setFailed] = React.useState(false);

  React.useEffect(() => {
    if (!isAuto) return;
    let alive = true;
    sfFetchYouTube(net.channelId).then((res) => {
      if (!alive) return;
      if (res && res.length) setPosts(res);
      else setFailed(true);
    });
    return () => { alive = false; };
  }, []);

  // Tiles a renderizar: reales, skeleton (cargando) o placeholders (perfil)
  let tiles;
  if (isAuto && posts === null && !failed) {
    tiles = [0, 1, 2].map((i) => <SfSkeleton key={i} />);
  } else {
    const list = (posts && posts.length)
      ? posts.slice(0, 3)
      : [0, 1, 2].map(() => ({ url: net.url })); // placeholders → perfil
    tiles = list.map((p, i) => <SfTile key={i} post={p} platform={net.platform} label={SF_LABEL[net.platform]} />);
  }

  return (
    <article className={`sfeed-card sfeed-${net.platform}`}>
      <header className="sfeed-card-head">
        <a className="sfeed-handle" href={net.url} target="_blank" rel="noopener noreferrer">
          <span className="sfeed-icon" aria-hidden="true">{SF_ICONS[net.platform]}</span>
          <span className="sfeed-handle-text">
            <b>{net.handle}</b>
            <small>{SF_LABEL[net.platform]}</small>
          </span>
        </a>
        <a className="sfeed-viewall" href={net.url} target="_blank" rel="noopener noreferrer">
          {t.socialFeed.viewProfile}
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3.5 3h5.5m0 0v5.5M9 3 3 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </a>
      </header>
      <div className="sfeed-tiles">{tiles}</div>
    </article>
  );
}

// ── CURATOR.IO ──
// Pega aquí tu Feed ID (el código XXXXXXXX de https://cdn.curator.io/published/XXXXXXXX.js)
// Mientras esté vacío, se muestran las tarjetas actuales (YouTube auto + IG/TikTok).
const CURATOR_FEED_ID = "507b27d5-34b5-4c73-a5a1-bec3cdf56e6b";

function CuratorFeed() {
  React.useEffect(() => {
    if (!CURATOR_FEED_ID) return;
    const id = 'curator-js-' + CURATOR_FEED_ID;
    if (document.getElementById(id)) return;
    const s = document.createElement('script');
    s.id = id; s.async = true;
    s.src = `https://cdn.curator.io/published/${CURATOR_FEED_ID}.js`;
    document.body.appendChild(s);
  }, []);
  return (
    <div className="sfeed-curator reveal" ref={useReveal()}>
      <div id="curator-feed-default-feed-layout">
        <a href="https://curator.io" target="_blank" rel="noopener noreferrer" className="crt-logo crt-tag">Powered by Curator.io</a>
      </div>
    </div>
  );
}

function SocialFeed({ t }) {
  return (
    <section className="section social-feed" id="social" data-screen-label="04 Redes">
      <div className="container">
        {CURATOR_FEED_ID
          ? <CuratorFeed />
          : <div className="social-feed-grid reveal" ref={useReveal()}>
              {SF_NETWORKS.map((net) => <SocialColumn key={net.platform} net={net} t={t} />)}
            </div>}

        <div className="about-alliances reveal" ref={useReveal()}>
          <span className="about-alliances-label">{t.about.alliancesLabel}</span>
          <div className="about-alliances-list">
            {t.about.alliances.map((a, i) => (
              <a className="about-alliance" key={i} href={a.url || '#'} target="_blank" rel="noopener noreferrer">{a.name}</a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SocialFeed });