import {useSite} from '@site/lib/site-context';
import {heroFacts, sectionBody} from '@site/lib/derive';

function dotDate(iso: string): string {
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
  return m ? `${m[1]}. ${m[2]}. ${m[3]}` : iso;
}

function Post({publishedAt, body}: {publishedAt: string; body: string}) {
  return (
    <article className="post">
      <time dateTime={publishedAt}>{dotDate(publishedAt)}</time>
      <p>{body}</p>
    </article>
  );
}

const HOME_MAX = 3;
const FULL_FIRST = 5;

function Blog({full}: {full?: boolean}) {
  const payload = useSite();
  const posts = [...(payload.posts ?? [])].sort((a, b) => b.publishedAt.localeCompare(a.publishedAt));
  if (posts.length === 0) return null;
  const shown = posts.slice(0, full ? FULL_FIRST : HOME_MAX);
  const older = full ? posts.slice(FULL_FIRST) : [];
  const more = !full && posts.length > HOME_MAX;

  return (
    <section className="wrap" id={full ? 'blog' : undefined}>
      <p className="label">JOURNAL</p>
      <h2>미니 블로그</h2>
      <p className="lead">사장님이 직접 남기는 소식입니다.</p>
      <div className="posts" data-blog={full ? 'full' : 'home'}>
        {shown.map((item) => (
          <Post key={item.postId} publishedAt={item.publishedAt} body={item.body} />
        ))}
      </div>
      {more && (
        <a href="#/story" className="link more-link">
          이야기에서 지난 소식 더 보기
        </a>
      )}
      {older.length > 0 && (
        <details className="fold">
          <summary className="link">지난 소식 {older.length}개</summary>
          <div className="posts">
            {older.map((item) => (
              <Post key={item.postId} publishedAt={item.publishedAt} body={item.body} />
            ))}
          </div>
        </details>
      )}
    </section>
  );
}

export function Intro() {
  const payload = useSite();
  const {narrative, place} = payload;
  const own = sectionBody(payload, 'intro');
  const about = own.length > 0 ? own : narrative.about;
  const facts = heroFacts(payload);

  return (
    <>
      <div data-pg="story">
        <Blog full />
      </div>
      <div data-pg="home">
        {about.length > 0 && (
          <section className="wrap" id="about" aria-labelledby="about-heading">
            <p className="label">ABOUT</p>
            <h2 id="about-heading">{place.name} 소개</h2>
            {narrative.summary && <p className="lead strong">{narrative.summary}</p>}
            <p className="lead">{about[0]}</p>
            {about.length > 1 && (
              <details className="fold">
                <summary className="link">더 읽기</summary>
                {about.slice(1).map((paragraph, i) => (
                  <p key={i} className="lead">
                    {paragraph}
                  </p>
                ))}
              </details>
            )}
            {facts.length > 0 && (
              <div className="facts">
                {facts.map((row) => (
                  <div key={row.key ?? row.label}>
                    <small>{row.label}</small>
                    <b>{row.value}</b>
                  </div>
                ))}
              </div>
            )}
          </section>
        )}
        <Blog />
      </div>
    </>
  );
}