---
// 行事予定の一覧表。データは src/data/schedule/*.json から読む。
// セルの中身は HTML（リンクを含む）としてそのまま出力する。
import meetings from '@/data/schedule/meetings.json';
import events from '@/data/schedule/events.json';
import { entryDates, mainStartMonth } from '@/lib/schedule-dates';

type Row = { date: string; title: string; place: string; note: string; source: string };
type TableData = { columns: string[]; rows: Row[] };

const {
  variant,
  rows,
  scope = 'all',
} = Astro.props as { variant: 'meeting' | 'event'; rows?: Row[]; scope?: 'all' | 'main' };
const base: TableData = (variant === 'meeting' ? meetings : events) as TableData;
// rows を渡された場合はその行だけを表示する（月別・年度別アーカイブ用）
let list = rows ?? base.rows;

// scope="main" のときは、前月以降に開催される予定だけを表示する。
// 前々月以前の終了分はアーカイブに移し、メインページが年々肥大化しないようにする。
if (scope === 'main') {
  const start = `${mainStartMonth()}-01`;
  list = list.filter((row) =>
    entryDates(variant, row.date, row.place).some((date) => date >= start),
  );
}

const data: TableData = { columns: base.columns, rows: list };

// 「令和9年1月28日（木）」のような長い日付で列が広がるため、「令和9年」の直後で改行する。
const dateHtml = (html: string) =>
  html.replace(/(令和[0-9０-９]+年)(?!\s*<br)/, '$1<br />');
---

<table>
  <thead>
    <tr>{data.columns.map((column) => <th>{column}</th>)}</tr>
  </thead>
  <tbody>
    {
      data.rows.map((row) => (
        <tr>
          <td set:html={dateHtml(row.date)} />
          <td set:html={row.title} />
          <td set:html={row.place} />
          <td set:html={row.note} />
          <td set:html={row.source} />
        </tr>
      ))
    }
  </tbody>
</table>

<script>
  // 行ごとの共有ボタン（X・Instagram・Facebook）。
  // 行数が多いため、HTMLには書かず、このスクリプトで後から差し込む。
  // アイコンは CSS（mask-image）で描くので、ボタンには文字もSVGも入れない。
  if (!document.documentElement.dataset.scheduleShareInit) {
    document.documentElement.dataset.scheduleShareInit = '1';

    const KINDS: { kind: string; label: string }[] = [
      { kind: 'x', label: 'Xでシェア' },
      { kind: 'share', label: '共有する' },
    ];

    function attachButtons() {
      for (const row of document.querySelectorAll<HTMLTableRowElement>(
        '.schedule-table tbody tr',
      )) {
        const titleCell = row.children[1];
        if (!titleCell || titleCell.querySelector('.schedule-share')) continue;

        const wrap = document.createElement('span');
        wrap.className = 'schedule-share';
        for (const { kind, label } of KINDS) {
          const button = document.createElement('button');
          button.type = 'button';
          button.className = `schedule-share-btn is-${kind}`;
          button.dataset.share = kind;
          button.setAttribute('aria-label', label);
          button.title = label;
          wrap.appendChild(button);
        }
        titleCell.appendChild(wrap);
      }
    }

    const strip = (el: Element | null | undefined) =>
      (el?.textContent ?? '').replace(/\s+/g, ' ').trim();

    // 共有する文面（日時＋タイトル＋時間と場所＋申込み等）
    function shareText(row: Element): string {
      const cells = row.children;
      const lines = [`${strip(cells[0])}　${strip(cells[1])}`];
      const place = strip(cells[2]);
      const note = strip(cells[3]);
      if (place) lines.push(place);
      if (note) lines.push(note.length > 120 ? `${note.slice(0, 120)}…` : note);
      return lines.join('\n');
    }

    function rowUrl(row: Element): string {
      const base = location.origin + location.pathname;
      return row.id ? `${base}#${row.id}` : base;
    }

    document.addEventListener('click', async (event) => {
      const target = event.target as HTMLElement | null;
      const button = target?.closest<HTMLElement>('.schedule-share-btn');
      if (!button) return;
      const row = button.closest('tr');
      if (!row) return;

      const text = shareText(row);
      const url = rowUrl(row);
      const kind = button.dataset.share;

      if (kind === 'x') {
        window.open(
          `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`,
          '_blank',
          'noopener',
        );
        return;
      }

      // 共有：端末の共有メニュー（Instagram・メール・メモなど）を開く。
      // 非対応のブラウザでは、文面をコピーして貼り付けられるようにする。
      const share = (navigator as Navigator & { share?: (data: ShareData) => Promise<void> })
        .share;
      if (share) {
        try {
          await share.call(navigator, { text, url });
        } catch {
          // キャンセルされた場合は何もしない
        }
        return;
      }

      try {
        await navigator.clipboard.writeText(`${text}\n${url}`);
        const original = button.title;
        button.classList.add('is-done');
        button.title = 'コピーしました';
        button.setAttribute('aria-label', 'コピーしました');
        window.setTimeout(() => {
          button.classList.remove('is-done');
          button.title = original;
          button.setAttribute('aria-label', original);
        }, 1500);
      } catch {
        window.alert('このブラウザでは共有メニューもコピーも使えません。文面を選択してコピーしてください。');
      }
    });

    attachButtons();
    // アーカイブの絞り込みなどで行が増えた場合にも備える
    document.addEventListener('click', () => setTimeout(attachButtons, 0));
  }
</script>