// News.jsx — Tin tức: đọc bài "published" từ Supabase (anon, RLS chỉ trả bài đã đăng — 0033).
// Quản trị nội dung: portal my.swo.vn → module "Quản trị website". Không có bài → ẩn cả section.
function newsDate(iso){
  if (!iso) return '';
  const d = new Date(iso);
  return String(d.getDate()).padStart(2, '0') + '/' + String(d.getMonth() + 1).padStart(2, '0') + '/' + d.getFullYear();
}
function News() {
  const [posts, setPosts] = React.useState(null);   // null = đang tải
  const [open, setOpen] = React.useState(null);     // bài đang đọc (modal)
  React.useEffect(() => {
    const C = window.SITE_CONFIG || {};
    if (!C.SUPABASE_URL || !C.SUPABASE_ANON_KEY) { setPosts([]); return; }
    fetch(C.SUPABASE_URL + '/rest/v1/cms_posts?status=eq.published&order=published_at.desc&limit=6'
        + '&select=id,slug,title,excerpt,content,cover_url,category,published_at,author_name',
      { headers: { apikey: C.SUPABASE_ANON_KEY, Authorization: 'Bearer ' + C.SUPABASE_ANON_KEY } })
      .then(r => r.ok ? r.json() : [])
      .then(rows => setPosts(Array.isArray(rows) ? rows : []))
      .catch(() => setPosts([]));
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  if (posts !== null && posts.length === 0) return null;   // chưa có tin → không chiếm chỗ
  return (
    <Section id="news" tone="soft">
      <Reveal><Eyebrow>Tin tức &amp; sự kiện</Eyebrow></Reveal>
      <Reveal delay={60}><h2 className="swk-h2">Tin mới từ S.W.O</h2></Reveal>
      <Reveal delay={120}><p className="swk-lead">Cập nhật dự án, công nghệ và hoạt động mới nhất của chúng tôi.</p></Reveal>
      <div className="swk-newsgrid">
        {(posts || []).map((w, i) => (
          <Reveal key={w.id} delay={(i % 3) * 90}>
            <a className="swk-news" href={'#news-' + w.slug} onClick={(e) => { e.preventDefault(); setOpen(w); }}>
              <div className="swk-news-cover">
                {w.cover_url ? <img src={w.cover_url} alt="" loading="lazy" /> : <div className="swk-news-ph"><Icon name="zap" size={28} /></div>}
              </div>
              <div className="swk-news-body">
                <div className="swk-news-meta">{w.category && <span className="cat">{w.category}</span>}<span>{newsDate(w.published_at)}</span></div>
                <h3>{w.title}</h3>
                {w.excerpt && <p>{w.excerpt}</p>}
                <span className="more">Đọc tiếp <Icon name="arrowRight" size={16} /></span>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
      {open && (
        <div className="swk-news-overlay" onClick={() => setOpen(null)}>
          <article className="swk-news-modal" onClick={(e) => e.stopPropagation()}>
            <button className="swk-news-close" aria-label="Đóng" onClick={() => setOpen(null)}><Icon name="x" size={20} /></button>
            {open.cover_url && <img className="hero" src={open.cover_url} alt="" />}
            <div className="inner">
              <div className="swk-news-meta">{open.category && <span className="cat">{open.category}</span>}<span>{newsDate(open.published_at)}</span>{open.author_name && <span>· {open.author_name}</span>}</div>
              <h2>{open.title}</h2>
              {/* Nội dung do quản trị viên nội bộ soạn (RichEditor) — cùng mức tin cậy với portal */}
              <div className="swk-news-content" dangerouslySetInnerHTML={{ __html: open.content || '' }} />
            </div>
          </article>
        </div>
      )}
    </Section>
  );
}
Object.assign(window, { News });