/**
 * 인물 열전 — 발행본. 필름 한 롤에 프레임이 이어진다.
 * ★ 프레임 안은 사진이 있으면 사진, 없으면 활판 이니셜이다 — 빈 회색 상자를 두지 않는다.
 */
import type {PeopleItem} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {sectionItems, sectionName} from '@site/lib/derive';
import {ITEM_INVERSE, ItemSection, Rail, SourceLine, tally} from './common';

export function PeopleSection() {
  const payload = useSite();
  const parsed = sectionItems<PeopleItem>(payload, 'people');
  if (parsed.items.length === 0) return null;

  return (
    <ItemSection
      id="people"
      name={parsed.title || sectionName(payload, 'people', '인물 열전')}
      subtitle={parsed.subtitle}
      count={
        // 각주는 실제로 활자로 대신한 인물이 있을 때만 — 전원 사진이 있으면 틀린 말이 된다.
        parsed.items.some((person) => !person.imageUrl)
          ? `${tally(parsed.items.length, parsed.unverified, '명')} · 사진이 없는 인물은 이름 활자로 대신합니다`
          : tally(parsed.items.length, parsed.unverified, '명')
      }
      dark
    >
      <div
        className="tpl-border border"
        // 어두운 면 위의 선도 흰색을 박지 않는다 — 둘레 글자색을 섞는다.
        style={{
          backgroundColor: ITEM_INVERSE,
          borderColor: 'color-mix(in oklab, currentColor 22%, transparent)',
        }}
      >
        <div className="w4-film-perf h-2.5 opacity-100" />
        <div className="px-3 py-4">
          <Rail label="인물 목록" arrows="overlay">
            {parsed.items.map((person, index) => (
              <article key={`${person.name}-${index}`} className="w-[210px] shrink-0 snap-center">
                {/* 사진 출처는 카드 아래 SourceLine 옆에 붙는다(아래) — 라이선스 조건이다. */}
                {person.imageUrl ? (
                  <img
                    src={person.imageUrl}
                    alt={`${person.name} 사진`}
                    loading="lazy"
                    decoding="async"
                    className="aspect-3/4 w-full border object-cover"
                    style={{borderColor: 'color-mix(in oklab, currentColor 28%, transparent)'}}
                  />
                ) : (
                  <span
                    className="serif grid aspect-3/4 w-full place-items-center border text-5xl"
                    // 프레임 안쪽은 필름보다 한 단 밝게 — 색을 박지 않고 글자색을 섞어 만든다.
                    style={{
                      backgroundColor: 'color-mix(in oklab, currentColor 14%, transparent)',
                      borderColor: 'color-mix(in oklab, currentColor 28%, transparent)',
                    }}
                    aria-hidden
                  >
                    {person.name.trim().charAt(0)}
                  </span>
                )}
                <h3 className="serif mt-3 text-base font-bold">
                  {person.name}
                  {person.aka && <span className="ml-1.5 text-[length:var(--fs-xs)] opacity-100">호 {person.aka}</span>}
                </h3>
                <p className="mt-0.5 text-[length:var(--fs-xs)] opacity-100">
                  {[person.role, person.years].filter(Boolean).join(' · ')}
                </p>
                {person.oneLine && <p className="mt-2 text-[length:var(--fs-sm)] leading-relaxed opacity-100">{person.oneLine}</p>}
                <div className="mt-2">
                  <SourceLine source={person.source} verified={person.verified} imageCredit={person.imageCredit} />
                </div>
              </article>
            ))}
          </Rail>
        </div>
        <div className="w4-film-perf h-2.5 opacity-100" />
      </div>
    </ItemSection>
  );
}