/**
 * 오늘의 한 장 — 발행본.
 *
 * ★ '오늘'을 서버에서 고르지 않는다. 프리렌더는 굽는 날짜로만 알고, 그 HTML 은 며칠씩 산다 —
 *   구울 때의 '오늘'을 박으면 내일 틀린 날짜가 오늘로 걸린다.
 *   그래서 전부 펴서 굽고, 브라우저에서 오늘 자리에만 표시를 얹는다(useEffect: SSR 과 안 어긋난다).
 */
import {useEffect, useState} from 'react';
import type {DailyItem} from '@o2o/shared';
import {useSite} from '@/lib/site-context';
import {sectionItems, sectionName} from '@/lib/derive';
import {ITEM_ACCENT, ITEM_BORDER, ITEM_CARD, ItemSection, Rail, SourceLine, tally} from './common';

export function DailySection() {
  const payload = useSite();
  const parsed = sectionItems<DailyItem>(payload, 'daily');
  const [today, setToday] = useState<string>();

  useEffect(() => {
    const now = new Date();
    setToday(`${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`);
  }, []);

  if (parsed.items.length === 0) return null;
  const pages = [...parsed.items].sort((a, b) => a.monthDay.localeCompare(b.monthDay));

  return (
    <ItemSection
      id="daily"
      name={parsed.title || sectionName(payload, 'daily', '오늘의 한 장')}
      subtitle={parsed.subtitle}
      count={tally(pages.length, parsed.unverified, '장')}
    >
      <Rail label="날짜별 이야기">
        {pages.map((page, index) => {
          const [month, day] = page.monthDay.split('-');
          const isToday = today === page.monthDay;
          return (
            <article
              key={`${page.monthDay}-${index}`}
              className="w4-paper relative w-[254px] shrink-0 snap-center border"
              style={{
                backgroundColor: ITEM_CARD,
                borderColor: isToday ? ITEM_ACCENT : ITEM_BORDER,
                boxShadow: isToday ? '5px 6px 0 rgba(191,47,27,.18)' : '5px 6px 0 rgba(27,26,21,.13)',
              }}
            >
              <div
                className="w4-perf h-3.5 border-b border-dashed"
                style={{['--tear' as string]: ITEM_CARD, borderColor: ITEM_BORDER}}
              />
              <div className="border-b px-5 pb-3 pt-5 text-center" style={{borderColor: ITEM_BORDER}}>
                <p className="text-[11px] tracking-[0.2em] opacity-60">{month}月</p>
                <p className="serif mt-1 text-6xl font-bold leading-none" style={{color: ITEM_ACCENT}}>
                  {String(Number(day) || day)}
                </p>
                {isToday && <p className="mt-1.5 text-[10px] tracking-[0.3em]" style={{color: ITEM_ACCENT}}>오늘</p>}
              </div>
              <div className="space-y-2 px-5 pb-5 pt-4">
                {page.category && <p className="text-[10px] tracking-[0.16em] opacity-60">{page.category}</p>}
                <h3 className="serif text-base font-bold leading-snug">{page.title}</h3>
                {page.body && <p className="text-[13px] leading-relaxed opacity-80">{page.body}</p>}
                {page.tags && page.tags.length > 0 && (
                  <p className="text-[10px] opacity-55">{page.tags.join(' ')}</p>
                )}
                <div className="border-t border-dashed pt-2.5" style={{borderColor: ITEM_BORDER}}>
                  <SourceLine source={page.source} verified={page.verified} />
                </div>
              </div>
            </article>
          );
        })}
      </Rail>
    </ItemSection>
  );
}