/**
 * トップ画面: パンフレットを探す。
 *
 * - キーワード・都道府県・カテゴリで絞り込み
 * - 「現在地から探す」で近い順に並べ、その地点を配信範囲に含む優先枠(PR)を上に出す
 * - リスト / 地図 の切り替え(地図は表示範囲が変わるたびに /api/v1/pamphlets/map を読む)
 *
 * iOS アプリと同じ公開 API だけを使う。画面だけの特別な口は作らない。
 */
(function renderCatalogHomeApp() {
  'use strict';

  const { useState, useEffect, useCallback, useRef } = React;

  const rootElement = document.getElementById('catalog-home-root');
  const searchEndpointUrl = rootElement.dataset.searchEndpoint;
  const mapEndpointUrl = rootElement.dataset.mapEndpoint;
  const reelsUrl = rootElement.dataset.reelsUrl;
  const categoryLabelsByKey = JSON.parse(rootElement.dataset.categories);
  const prefectureNames = JSON.parse(rootElement.dataset.prefectures);

  const JAPAN_CENTER = [36.2, 138.25];
  const KIND_OPTIONS = [
    { key: '', label: 'すべて' },
    { key: 'pamphlet', label: 'パンフレット' },
    { key: 'poster', label: 'ポスター' },
  ];

  function buildQueryString(searchConditions) {
    const queryParameters = new URLSearchParams();
    Object.entries(searchConditions).forEach(([parameterName, parameterValue]) => {
      if (parameterValue !== null && parameterValue !== undefined && parameterValue !== '') {
        queryParameters.set(parameterName, parameterValue);
      }
    });
    return queryParameters.toString();
  }

  function formatEventPeriod(startsOn, endsOn) {
    if (!startsOn) return null;
    const formatDate = (isoDate) => {
      const [, month, day] = isoDate.split('-');
      return `${Number(month)}/${Number(day)}`;
    };
    return endsOn && endsOn !== startsOn ? `${formatDate(startsOn)}〜${formatDate(endsOn)}` : formatDate(startsOn);
  }

  function PamphletCard({ pamphlet, isPromoted }) {
    const eventPeriod = formatEventPeriod(pamphlet.starts_on, pamphlet.ends_on);

    return (
      <a className="pamphlet-card" href={pamphlet.viewer_url}>
        <div className="pamphlet-cover">
          {pamphlet.cover_image_url && <img src={pamphlet.cover_image_url} alt="" loading="lazy" />}
          <div className="cover-badges">
            {pamphlet.is_ongoing && <span className="badge is-ongoing">開催中</span>}
            {isPromoted && <span className="badge is-pr">PR</span>}
          </div>
        </div>
        <div className="pamphlet-body">
          <h3>{pamphlet.title}</h3>
          {pamphlet.venue && (
            <div className="pamphlet-meta">
              {pamphlet.venue.prefecture}・{pamphlet.venue.name}
            </div>
          )}
          <div className="pamphlet-tags">
            {pamphlet.kind === 'poster' && <span className="badge is-kind">ポスター</span>}
            <span className="badge">{pamphlet.category_label}</span>
            {eventPeriod && <span className="badge">{eventPeriod}</span>}
            {pamphlet.distance_km !== undefined && <span className="badge is-distance">{pamphlet.distance_km}km</span>}
          </div>
        </div>
      </a>
    );
  }

  function PamphletMap({ searchConditions, currentLocation }) {
    const mapContainerRef = useRef(null);
    const leafletMapRef = useRef(null);
    const markerLayerRef = useRef(null);
    const searchConditionsRef = useRef(searchConditions);
    searchConditionsRef.current = searchConditions;

    const loadPinsInView = useCallback(async () => {
      const leafletMap = leafletMapRef.current;
      if (!leafletMap) return;

      const visibleBounds = leafletMap.getBounds();
      const mapResponse = await requestJson(`${mapEndpointUrl}?${buildQueryString({
        south: visibleBounds.getSouth().toFixed(5),
        west: visibleBounds.getWest().toFixed(5),
        north: visibleBounds.getNorth().toFixed(5),
        east: visibleBounds.getEast().toFixed(5),
      })}`);

      const { category: selectedCategory, kind: selectedKind } = searchConditionsRef.current;
      markerLayerRef.current.clearLayers();
      mapResponse.data
        .filter((pamphlet) => !selectedCategory || pamphlet.category === selectedCategory)
        .filter((pamphlet) => !selectedKind || pamphlet.kind === selectedKind)
        .forEach((pamphlet) => {
          const popupElement = document.createElement('div');
          const titleLink = document.createElement('a');
          titleLink.href = pamphlet.viewer_url;
          titleLink.textContent = pamphlet.title;
          titleLink.style.fontWeight = '700';
          const venueLine = document.createElement('div');
          venueLine.textContent = pamphlet.venue.name;
          popupElement.append(titleLink, venueLine);

          L.marker([pamphlet.venue.latitude, pamphlet.venue.longitude])
            .bindPopup(popupElement)
            .addTo(markerLayerRef.current);
        });
    }, []);

    useEffect(() => {
      const leafletMap = L.map(mapContainerRef.current).setView(
        currentLocation ? [currentLocation.latitude, currentLocation.longitude] : JAPAN_CENTER,
        currentLocation ? 12 : 5,
      );
      L.tileLayer(PamphletHubMap.tileUrl, { attribution: PamphletHubMap.attribution, maxZoom: 18 }).addTo(leafletMap);
      markerLayerRef.current = L.layerGroup().addTo(leafletMap);
      leafletMapRef.current = leafletMap;

      if (currentLocation) {
        L.circleMarker([currentLocation.latitude, currentLocation.longitude], { radius: 8, color: '#2b3a67', fillOpacity: 0.8 })
          .bindTooltip('現在地')
          .addTo(leafletMap);
      }

      leafletMap.on('moveend', loadPinsInView);
      loadPinsInView();

      return () => leafletMap.remove();
    }, [currentLocation, loadPinsInView]);

    useEffect(() => {
      loadPinsInView();
    }, [searchConditions.category, searchConditions.kind, loadPinsInView]);

    return <div ref={mapContainerRef} className="catalog-map" />;
  }

  const FEATURE_INTERVAL_MS = 6000;
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /**
   * トップの「いま注目の催し」。雑誌の表紙のように 1 件を大きく見せ、数秒ごとに次へ切り替える。
   * 表紙は切り抜かず紙のまま見せる。マウスを乗せている間・操作中は止める。
   */
  function FeaturedHero({ featuredPamphlets }) {
    const [currentFeatureIndex, setCurrentFeatureIndex] = useState(0);
    const [isPaused, setIsPaused] = useState(false);
    const featureCount = featuredPamphlets.length;

    const showFeature = useCallback((targetIndex) => {
      setCurrentFeatureIndex(((targetIndex % featureCount) + featureCount) % featureCount);
    }, [featureCount]);

    useEffect(() => {
      if (featureCount < 2 || isPaused || prefersReducedMotion) return undefined;
      const advanceTimer = window.setTimeout(() => showFeature(currentFeatureIndex + 1), FEATURE_INTERVAL_MS);
      return () => window.clearTimeout(advanceTimer);
    }, [currentFeatureIndex, featureCount, isPaused, showFeature]);

    if (featureCount === 0) {
      return (
        <section className="featured-hero is-empty">
          <div className="featured-hero-inner">
            <h1 className="featured-hero-tagline">全国のパンフレット・ポスター・チラシを、無料でスライド閲覧。</h1>
          </div>
        </section>
      );
    }

    const featuredPamphlet = featuredPamphlets[Math.min(currentFeatureIndex, featureCount - 1)];
    const eventPeriod = formatEventPeriod(featuredPamphlet.starts_on, featuredPamphlet.ends_on);

    return (
      <section
        className="featured-hero"
        aria-roledescription="カルーセル"
        aria-label="いま注目の催し"
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
        onFocus={() => setIsPaused(true)}
        onBlur={() => setIsPaused(false)}
      >
        <h1 className="visually-hidden">全国のパンフレット・ポスター・チラシを、無料でスライド閲覧</h1>
        <div className="featured-hero-inner">
          <a className="featured-cover" href={featuredPamphlet.viewer_url} key={`cover-${featuredPamphlet.id}`} aria-hidden="true" tabIndex={-1}>
            <img src={featuredPamphlet.cover_image_url} alt="" />
          </a>

          <div className="featured-body" key={`body-${featuredPamphlet.id}`} aria-live="polite">
            <p className="featured-eyebrow">{featuredPamphlet.is_ongoing ? 'いま開催中' : 'いま注目の催し'}</p>
            <div className="featured-badges">
              {featuredPamphlet.is_ongoing && <span className="badge is-ongoing">開催中</span>}
              {featuredPamphlet.kind === 'poster' && <span className="badge is-kind">ポスター</span>}
              <span className="badge">{featuredPamphlet.category_label}</span>
            </div>
            <h2 className="featured-title">
              <a href={featuredPamphlet.viewer_url}>{featuredPamphlet.title}</a>
            </h2>
            <dl className="featured-facts">
              {eventPeriod && <><dt>開催</dt><dd>{eventPeriod}</dd></>}
              {featuredPamphlet.venue && <><dt>会場</dt><dd>{featuredPamphlet.venue.prefecture} {featuredPamphlet.venue.name}</dd></>}
              {featuredPamphlet.page_count > 1 && <><dt>ページ</dt><dd>{featuredPamphlet.page_count}ページ</dd></>}
            </dl>
            <div className="featured-actions">
              <a className="button is-primary" href={featuredPamphlet.viewer_url}>スライドで読む</a>
              <a className="forward-link" href={reelsUrl}>リールで次々に見る</a>
            </div>
          </div>
        </div>

        {featureCount > 1 && (
          <div className="featured-controls">
            <button type="button" className="featured-step is-prev" onClick={() => showFeature(currentFeatureIndex - 1)} aria-label="前の催し" />
            <div className="featured-dots" role="tablist" aria-label="注目の催しを選ぶ">
              {featuredPamphlets.map((dotPamphlet, dotIndex) => (
                <button
                  key={dotPamphlet.id}
                  type="button"
                  role="tab"
                  aria-selected={dotIndex === currentFeatureIndex}
                  aria-label={dotPamphlet.title}
                  className={dotIndex === currentFeatureIndex ? 'is-current' : ''}
                  onClick={() => showFeature(dotIndex)}
                />
              ))}
            </div>
            <span className="featured-count">{currentFeatureIndex + 1} / {featureCount}</span>
            <button type="button" className="featured-step is-next" onClick={() => showFeature(currentFeatureIndex + 1)} aria-label="次の催し" />
          </div>
        )}
      </section>
    );
  }

  function CatalogHomeApp() {
    const [enteredKeyword, setEnteredKeyword] = useState('');
    const [searchConditions, setSearchConditions] = useState({ keyword: '', kind: '', category: '', prefecture: '' });
    const [currentLocation, setCurrentLocation] = useState(null);
    const [isLocating, setIsLocating] = useState(false);
    const [displayMode, setDisplayMode] = useState('list');

    const [listedPamphlets, setListedPamphlets] = useState([]);
    const [promotedPamphlets, setPromotedPamphlets] = useState([]);
    const [paginationMeta, setPaginationMeta] = useState(null);
    const [isLoadingPamphlets, setIsLoadingPamphlets] = useState(true);
    const [loadErrorMessage, setLoadErrorMessage] = useState('');
    const [heroPamphlets, setHeroPamphlets] = useState([]);
    const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
    const activeFilterCount = [searchConditions.prefecture, searchConditions.category].filter(Boolean).length;

    const loadPamphlets = useCallback(async (pageNumber) => {
      setIsLoadingPamphlets(true);
      setLoadErrorMessage('');

      try {
        // 開催地の無いチラシ・広告なども受け取れるので include_without_venue を付ける
        const searchResponse = await requestJson(`${searchEndpointUrl}?${buildQueryString({
          include_without_venue: 1,
          ...searchConditions,
          latitude: currentLocation?.latitude,
          longitude: currentLocation?.longitude,
          page: pageNumber,
        })}`);

        setListedPamphlets((alreadyListedPamphlets) => (
          pageNumber === 1 ? searchResponse.data : [...alreadyListedPamphlets, ...searchResponse.data]
        ));
        setHeroPamphlets((currentHeroPamphlets) => (
          currentHeroPamphlets.length > 0
            ? currentHeroPamphlets
            // 開催中のものを先に、あとは開催が近い順(一覧の並び)で最大 5 件
            : [...searchResponse.data]
              .filter((pamphlet) => pamphlet.cover_image_url)
              .sort((pamphletA, pamphletB) => Number(pamphletB.is_ongoing) - Number(pamphletA.is_ongoing))
              .slice(0, 5)
        ));
        if (pageNumber === 1) setPromotedPamphlets(searchResponse.promoted);
        setPaginationMeta(searchResponse.meta);
      } catch (caughtError) {
        setLoadErrorMessage('読み込みに失敗しました。時間をおいて再度お試しください。');
      } finally {
        setIsLoadingPamphlets(false);
      }
    }, [searchConditions, currentLocation]);

    useEffect(() => {
      loadPamphlets(1);
    }, [loadPamphlets]);

    const handleSearchSubmit = useCallback((submitEvent) => {
      submitEvent.preventDefault();
      setSearchConditions((currentConditions) => ({ ...currentConditions, keyword: enteredKeyword }));
    }, [enteredKeyword]);

    const handleLocateClick = useCallback(() => {
      if (currentLocation) {
        setCurrentLocation(null);
        return;
      }
      if (!navigator.geolocation) {
        window.alert('このブラウザでは位置情報を利用できません。');
        return;
      }
      setIsLocating(true);
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setCurrentLocation({
            latitude: Number(position.coords.latitude.toFixed(5)),
            longitude: Number(position.coords.longitude.toFixed(5)),
          });
          setIsLocating(false);
          document.getElementById('catalog-results')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        },
        () => {
          window.alert('位置情報を取得できませんでした。ブラウザの設定で位置情報の利用を許可してください。');
          setIsLocating(false);
        },
        { enableHighAccuracy: false, timeout: 10000, maximumAge: 300000 },
      );
    }, [currentLocation]);

    const hasMorePages = paginationMeta && paginationMeta.current_page < paginationMeta.last_page;

    return (
      <>
        <FeaturedHero featuredPamphlets={heroPamphlets} />

        {/* 検索: 表にはキーワードと1行の操作（種類・近い順・絞り込み）だけ。都道府県とカテゴリは「絞り込み」の中 */}
        <section className="search-panel" aria-label="パンフレット・ポスター・チラシを探す">
          <form className="search-box" onSubmit={handleSearchSubmit} role="search">
            <input
              className="input" type="search" placeholder="イベント名・会場名などで探す"
              value={enteredKeyword} onChange={(changeEvent) => setEnteredKeyword(changeEvent.target.value)}
              aria-label="キーワード"
            />
            <button type="submit" className="button is-primary">探す</button>
          </form>

          <div className="search-controls">
            <div className="kind-switch is-compact" role="group" aria-label="種類">
              {KIND_OPTIONS.map((kindOption) => (
                <button key={kindOption.key || 'all'} type="button" aria-pressed={searchConditions.kind === kindOption.key}
                        className={searchConditions.kind === kindOption.key ? 'is-active' : ''}
                        onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, kind: kindOption.key }))}>
                  {kindOption.label}
                </button>
              ))}
            </div>
            <button type="button" className={`control-chip ${currentLocation ? 'is-active' : ''}`} onClick={handleLocateClick} disabled={isLocating} aria-pressed={Boolean(currentLocation)}>
              {isLocating ? '取得中…' : '近い順'}
            </button>
            <button type="button" className={`control-chip ${isFilterPanelOpen ? 'is-open' : ''}`} onClick={() => setIsFilterPanelOpen((isOpen) => !isOpen)} aria-expanded={isFilterPanelOpen}>
              絞り込み{activeFilterCount > 0 && <span className="control-count">{activeFilterCount}</span>}
            </button>
          </div>

          {activeFilterCount > 0 && !isFilterPanelOpen && (
            <div className="active-filters" aria-label="絞り込み中の条件">
              {searchConditions.prefecture && (
                <button type="button" onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, prefecture: '' }))}>
                  {searchConditions.prefecture}<span aria-hidden="true">×</span>
                </button>
              )}
              {searchConditions.category && (
                <button type="button" onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, category: '' }))}>
                  {categoryLabelsByKey[searchConditions.category]}<span aria-hidden="true">×</span>
                </button>
              )}
            </div>
          )}

          {isFilterPanelOpen && (
            <div className="filter-panel">
              <div className="filter-group">
                <label htmlFor="filter-prefecture">都道府県</label>
                <select
                  id="filter-prefecture" className="select" value={searchConditions.prefecture}
                  onChange={(changeEvent) => setSearchConditions((currentConditions) => ({ ...currentConditions, prefecture: changeEvent.target.value }))}
                >
                  <option value="">全国</option>
                  {prefectureNames.map((prefectureName) => <option key={prefectureName} value={prefectureName}>{prefectureName}</option>)}
                </select>
              </div>
              <div className="filter-group">
                <span className="filter-label">カテゴリ</span>
                <div className="chip-row" role="group" aria-label="カテゴリ">
                  <button type="button" className={`chip ${searchConditions.category === '' ? 'is-active' : ''}`}
                          onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, category: '' }))}>すべて</button>
                  {Object.entries(categoryLabelsByKey).map(([categoryKey, categoryLabel]) => (
                    <button key={categoryKey} type="button"
                            className={`chip ${searchConditions.category === categoryKey ? 'is-active' : ''}`}
                            onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, category: categoryKey }))}>
                      {categoryLabel}
                    </button>
                  ))}
                </div>
              </div>
              <div className="filter-actions">
                <button type="button" className="text-button"
                        onClick={() => setSearchConditions((currentConditions) => ({ ...currentConditions, prefecture: '', category: '' }))}>
                  条件をクリア
                </button>
                <button type="button" className="button is-secondary is-small" onClick={() => setIsFilterPanelOpen(false)}>閉じる</button>
              </div>
            </div>
          )}
        </section>

        <div className="catalog-body" id="catalog-results">
          <div className="toolbar">
            <div className="chip-row" role="group" aria-label="表示切り替え">
              <button type="button" className={`chip ${displayMode === 'list' ? 'is-active' : ''}`} onClick={() => setDisplayMode('list')}>リスト</button>
              <button type="button" className={`chip ${displayMode === 'map' ? 'is-active' : ''}`} onClick={() => setDisplayMode('map')}>地図</button>
              <a className="chip" href={reelsUrl} style={{ textDecoration: 'none' }}>リール</a>
            </div>
            {paginationMeta && displayMode === 'list' && (
              <span className="section-heading meta" style={{ margin: 0 }}>{paginationMeta.total}件</span>
            )}
          </div>

          {displayMode === 'map' ? (
            <PamphletMap searchConditions={searchConditions} currentLocation={currentLocation} />
          ) : (
            <>
              {promotedPamphlets.length > 0 && (
                <section className="promoted-strip" aria-label="近くのおすすめ">
                  <div className="section-heading" style={{ marginTop: 0 }}>
                    <h2>近くのおすすめ<small>PICK UP</small></h2><span className="meta">PR</span>
                  </div>
                  <div className="pamphlet-grid">
                    {promotedPamphlets.map((promotedPamphlet) => (
                      <PamphletCard key={`pr-${promotedPamphlet.id}`} pamphlet={promotedPamphlet} isPromoted />
                    ))}
                  </div>
                </section>
              )}

              <div className="section-heading">
                <h2>{currentLocation ? '近い順' : '開催が近い順'}<small>PAMPHLETS</small></h2>
              </div>

              {loadErrorMessage && <p className="flash is-error">{loadErrorMessage}</p>}

              {!isLoadingPamphlets && listedPamphlets.length === 0 ? (
                <p className="empty-state">条件に合うパンフレット・ポスター・チラシはまだありません。</p>
              ) : (
                <div className="pamphlet-grid">
                  {listedPamphlets.map((listedPamphlet) => (
                    <PamphletCard key={listedPamphlet.id} pamphlet={listedPamphlet} />
                  ))}
                </div>
              )}

              <div className="pager">
                {isLoadingPamphlets && <span className="meta">読み込み中…</span>}
                {!isLoadingPamphlets && hasMorePages && (
                  <button type="button" className="button is-secondary" onClick={() => loadPamphlets(paginationMeta.current_page + 1)}>
                    もっと見る
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </>
    );
  }

  ReactDOM.createRoot(rootElement).render(<CatalogHomeApp />);
})();