const { useState, useEffect, useMemo } = React;

const PER_PAGE = 5;

const CAT_LABELS = { info: 'お知らせ', media: 'メディア掲載', press: 'プレスリリース', blog: '社内ブログ' };
const CAT_STYLES = {
  press: { fontSize: 11.5, fontWeight: 600, color: '#3331A4', background: 'rgba(51,49,164,.07)', padding: '3px 10px', borderRadius: 5 },
  media: { fontSize: 11.5, fontWeight: 600, color: '#1a6b3a', background: 'rgba(26,107,58,.07)', padding: '3px 10px', borderRadius: 5 },
  info:  { fontSize: 11.5, fontWeight: 600, color: '#5E5E63', background: '#F7F6F4', padding: '3px 10px', borderRadius: 5 },
  blog:  { fontSize: 11.5, fontWeight: 600, color: '#9A6B00', background: 'rgba(154,107,0,.08)', padding: '3px 10px', borderRadius: 5 },
};

function formatNewsDate(dateStr) {
  const d = new Date(dateStr);
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
}

function stripTags(html) {
  return (html || '').replace(/<[^>]+>/g, '').trim();
}

function FilterTabs({ filter, onChange }) {
  const options = [
    { key: 'all', label: 'すべて' },
    { key: 'info', label: 'お知らせ' },
    { key: 'media', label: 'メディア掲載' },
    { key: 'press', label: 'プレスリリース' },
    { key: 'blog', label: '社内ブログ' },
  ];
  return (
    <section style={{ padding: '28px 80px', borderBottom: '1px solid #ECEAE6', background: '#fff' }}>
      <div className="inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          {options.map((o) => {
            const active = filter === o.key;
            return (
              <button
                key={o.key}
                onClick={() => onChange(o.key)}
                style={{
                  background: active ? '#111111' : '#F7F6F4',
                  color: active ? '#fff' : '#5E5E63',
                  fontSize: 13.5,
                  fontWeight: active ? 600 : 500,
                  border: 'none',
                  padding: '8px 18px',
                  borderRadius: 100,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}
              >
                {o.label}
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function NewsRow({ item }) {
  return (
    <a href={item.link} style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '24px 0', borderTop: '1px solid #ECEAE6', textDecoration: 'none', color: 'inherit' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontFamily: "'Hanken Grotesk',sans-serif", fontSize: 13, color: '#5E5E63', fontWeight: 500, whiteSpace: 'nowrap' }}>{item.date}</span>
        <span style={CAT_STYLES[item.cat] || CAT_STYLES.info}>{item.tag}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <h2 style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.6, letterSpacing: '-.01em', margin: 0, color: '#111111' }}>{item.title}</h2>
        <span style={{ flex: 'none', fontSize: 18, color: '#CBCAC6' }}>&rarr;</span>
      </div>
    </a>
  );
}

function Pagination({ page, totalPages, onChange }) {
  if (totalPages <= 1) return null;
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
  const btnStyle = (active, disabled) => ({
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    height: 38, minWidth: 38, padding: '0 14px', borderRadius: 8,
    fontSize: 14, fontWeight: active ? 700 : 500,
    background: active ? '#111111' : '#F7F6F4',
    color: disabled ? '#CBCAC6' : (active ? '#fff' : '#111111'),
    border: active ? 'none' : '1px solid #ECEAE6',
    cursor: disabled ? 'default' : 'pointer',
    fontFamily: 'inherit',
  });
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 40, flexWrap: 'wrap' }}>
      <button style={btnStyle(false, page === 1)} disabled={page === 1} onClick={() => onChange(page - 1)}>&larr; 前へ</button>
      {pages.map((p) => (
        <button key={p} style={btnStyle(p === page, false)} onClick={() => onChange(p)}>{p}</button>
      ))}
      <button style={btnStyle(false, page === totalPages)} disabled={page === totalPages} onClick={() => onChange(page + 1)}>次へ &rarr;</button>
    </div>
  );
}

function NewsApp() {
  const [posts, setPosts] = useState(null);
  const [filter, setFilter] = useState('all');
  const [page, setPage] = useState(1);

  useEffect(() => {
    Promise.all([
      fetch(`${WP_API}/wp/v2/news?per_page=100&orderby=date&order=desc&_fields=id,date,link,title,news_category`)
        .then((r) => (r.ok ? r.json() : [])),
      fetch(`${WP_API}/wp/v2/news_category?per_page=100&_fields=id,slug,name`)
        .then((r) => (r.ok ? r.json() : [])),
    ])
      .then(([data, terms]) => {
        const termById = {};
        (terms || []).forEach((t) => { termById[t.id] = t; });
        const mapped = (data || []).map((item) => {
          const catTerm = termById[(item.news_category || [])[0]];
          return {
            id: item.id,
            date: formatNewsDate(item.date),
            cat: catTerm ? catTerm.slug : 'info',
            tag: catTerm ? catTerm.name : 'お知らせ',
            title: stripTags(item.title.rendered),
            link: item.link,
          };
        });
        setPosts(mapped);
      })
      .catch(() => setPosts([]));
  }, []);

  const filtered = useMemo(() => {
    if (!posts) return [];
    return filter === 'all' ? posts : posts.filter((p) => p.cat === filter);
  }, [posts, filter]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  const currentPage = Math.min(page, totalPages);
  const pageItems = filtered.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE);

  const handleFilterChange = (key) => {
    setFilter(key);
    setPage(1);
  };

  if (posts === null) {
    return <section className="sec" style={{ background: '#fff' }}><div className="inner" style={{ maxWidth: 900 }}>読み込み中…</div></section>;
  }

  return (
    <>
      <FilterTabs filter={filter} onChange={handleFilterChange} />
      <section className="sec" style={{ background: '#fff' }}>
        <div className="inner" style={{ maxWidth: 900 }}>
          {pageItems.length === 0 ? (
            <div style={{ padding: '48px 0', textAlign: 'center', color: '#9A9A9A' }}>該当するお知らせはありません。</div>
          ) : (
            pageItems.map((item) => <NewsRow key={item.id} item={item} />)
          )}
          <div style={{ borderTop: '1px solid #ECEAE6' }}></div>
          <Pagination page={currentPage} totalPages={totalPages} onChange={setPage} />
        </div>
      </section>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('news-app')).render(<NewsApp />);