import {ArrowUpRight, Calendar, MapPin, Utensils} from 'lucide-react';
import type {LocalPlace} from '@o2o/shared';
import {useSite} from '@/lib/site-context';
import {formatKoreanDate, naverSearchUrl} from '@/lib/format';

/**
 * 주변 정보.
 *
 * "○○ 근처 숙소" 같은 지역 질의에 걸리려면 지역 고유명사가 본문에 있어야 한다.
 * ★ 우리가 남의 가게 URL 을 지어내지 않는다 — 검색 링크로만 보낸다.
 *   틀린 링크는 사용자를 엉뚱한 데로 보내고, 그 책임은 이 홈페이지가 진다.
 */
export function LocalGuideSection() {
  const payload = useSite();
  const {local} = payload;
  const hasAnything =
    local.restaurants.length > 0 || local.attractions.length > 0 || local.festivals.length > 0;
  if (!hasAnything) return null;

  return (
    <section
      id="guide"
      aria-labelledby="guide-heading"
      className="w-full border-b border-black/8 py-12 sm:py-20"
      style={{backgroundColor: 'var(--color-surface-alt)'}}
    >
      <div className="shell max-w-[880px]">
        <div className="mb-8 flex flex-col justify-between gap-2 border-b border-black/8 pb-4 sm:flex-row sm:items-baseline">
          <div>
            <h2 id="guide-heading" className="serif text-2xl font-bold tracking-tight sm:text-3xl">
              {'주변 안내'}
            </h2>
            <p className="mt-1 text-xs opacity-60 sm:text-sm">
              {payload.place.addressLocality ?? '주변'} 지역의 맛집 · 명소 · 행사 안내입니다.
            </p>
          </div>
          {local.syncedAt && (
            <p className="self-start text-[11px] opacity-50 sm:self-auto">
              {formatKoreanDate(local.syncedAt)} 갱신
            </p>
          )}
        </div>

        {local.restaurants.length > 0 && (
          <PlaceList title="주변 맛집" icon={Utensils} places={local.restaurants} />
        )}
        {local.attractions.length > 0 && (
          <PlaceList title="주변 명소" icon={MapPin} places={local.attractions} />
        )}

        {local.festivals.length > 0 && (
          <div className="space-y-4">
            <h3 className="serif flex items-center gap-2 text-base font-bold sm:text-lg">
              <Calendar className="size-4 opacity-50" />
              <span>지역 행사</span>
            </h3>

            <ul
              className="divide-y divide-black/5 overflow-hidden rounded-xl border border-black/8"
              style={{backgroundColor: 'var(--color-surface)'}}
            >
              {local.festivals.map((festival) => (
                <li key={festival.name} className="flex items-center justify-between gap-3 p-4">
                  <div className="min-w-0 space-y-0.5">
                    <div className="flex items-center gap-2">
                      <span className="rounded bg-black/5 px-1.5 py-0.5 text-[11px] font-bold">
                        {festival.month}
                      </span>
                      <h4 className="truncate text-xs font-bold sm:text-sm">{festival.name}</h4>
                    </div>
                    <p className="text-xs opacity-60">
                      {festival.description ?? festival.period}
                    </p>
                  </div>

                  <a
                    href={festival.officialUrl ?? naverSearchUrl(festival.searchQuery)}
                    target="_blank"
                    rel="noopener noreferrer nofollow"
                    className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs font-medium transition-colors hover:bg-black/5"
                  >
                    자세히
                  </a>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </section>
  );
}

function PlaceList({
  title,
  icon: Icon,
  places,
}: {
  title: string;
  icon: typeof MapPin;
  places: LocalPlace[];
}) {
  return (
    <div className="mb-8 space-y-4">
      <h3 className="serif flex items-center gap-2 text-base font-bold sm:text-lg">
        <Icon className="size-4 opacity-50" />
        <span>{title}</span>
      </h3>

      <ul
        className="divide-y divide-black/5 overflow-hidden rounded-xl border border-black/8"
        style={{backgroundColor: 'var(--color-surface)'}}
      >
        {places.map((place) => (
          <li key={place.name}>
            <a
              href={naverSearchUrl(place.searchQuery)}
              target="_blank"
              rel="noopener noreferrer nofollow"
              className="group flex items-center justify-between gap-3 p-4 transition-colors hover:bg-black/[0.02]"
            >
              <div className="min-w-0 space-y-0.5 pr-3">
                <div className="flex items-center gap-2">
                  <span className="truncate text-xs font-bold sm:text-sm">{place.name}</span>
                  {(place.distanceText ?? place.durationText) && (
                    <span className="shrink-0 font-mono text-[10px] opacity-50">
                      {place.distanceText ?? place.durationText}
                    </span>
                  )}
                </div>
                {place.description && (
                  <p className="truncate text-xs opacity-60">{place.description}</p>
                )}
              </div>
              <span className="flex shrink-0 items-center gap-0.5 text-xs opacity-40 transition-opacity group-hover:opacity-80">
                <span>검색</span>
                <ArrowUpRight className="size-3.5" />
              </span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}