import {useState} from 'react';
import type {FestivalEntry} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {naverSearchUrl} from '@site/lib/format';
import {PhotoCard} from '../kit/Card';
import {Sheet} from '../paper/Sheet';

const SEASONS = ['봄', '여름', '가을', '겨울'];

export function Festival() {
  const payload = useSite();
  const festivals = payload.local.festivals;
  const [season, setSeason] = useState('');
  const [open, setOpen] = useState<FestivalEntry | null>(null);
  if (festivals.length === 0) return null;
  const tabs = SEASONS.filter((s) => festivals.some((f) => f.season === s));
  const shown = festivals.filter((f) => !season || f.season === season);

  return (
    <>
      <section className="wrap" id="festival" aria-labelledby="festival-heading">
        <p className="label">SEASON</p>
        <h2 id="festival-heading">
          계절별 축제 <span className="cnt">{festivals.length}</span>
        </h2>
        <p className="lead">{payload.place.addressLocality ?? '이 지역'}의 축제와 행사를 계절로 묶었습니다.</p>
        {tabs.length > 1 && (
          <div className="chips" role="tablist">
            {['', ...tabs].map((s) => (
              <button
                key={s || 'all'}
                type="button"
                role="tab"
                aria-current={s === season}
                onClick={() => setSeason(s)}
              >
                {s || '전체'} {festivals.filter((f) => !s || f.season === s).length}
              </button>
            ))}
          </div>
        )}
        <div className="rail">
          {shown.map((f) => (
            <PhotoCard
              key={f.name}
              image={f.imageUrl}
              title={f.name}
              meta={[f.month, f.location].filter(Boolean).join(' · ')}
              onClick={() => setOpen(f)}
            />
          ))}
        </div>
      </section>
      <Sheet open={open != null} onClose={() => setOpen(null)} label={open?.name ?? ''}>
        {open && (
          <>
            {open.imageUrl && <img src={open.imageUrl} alt={open.name} />}
            <h3>{open.name}</h3>
            <p className="meta">{[open.period ?? open.month, open.location].filter(Boolean).join(' · ')}</p>
            {open.description && <p>{open.description}</p>}
            <a
              className="out"
              href={open.officialUrl ?? naverSearchUrl(open.searchQuery)}
              target="_blank"
              rel="noopener noreferrer"
            >
              자세히 보기
            </a>
          </>
        )}
      </Sheet>
    </>
  );
}