---
/**
 * QuestionSummary — 一般質問の「まとめ」表と FAQPage JSON-LD を単一のデータ源から生成。
 *
 * ## 使い方（新規一般質問ページを作成する際のルール）
 *
 * 1. Markdown の表（| 質問 | 答弁概要 |）は **書かない**。
 * 2. 代わりにこのコンポーネントを import して使う:
 *
 * ```mdx
 * import QuestionSummary from '@/components/QuestionSummary.astro';
 *
 * <QuestionSummary
 *   headline="ページのタイトル"
 *   about="障害者虐待"
 *   datePublished="2025-06-06"
 *   qa={[
 *     { question: "① 質問文", answer: "答弁テキスト", anchor: "-見出し名" },
 *     { question: "② 質問文", answer: "答弁テキスト", anchor: "-見出し名" },
 *   ]}
 * />
 * ```
 *
 * 3. 表の更新は qa 配列を編集するだけ。表表示と JSON-LD が自動で同期される。
 *
 * - question: 表の「質問」列の内容（番号付きで）
 * - answer: 表の「答弁概要」列のテキスト（リンク構文なしのプレーンテキスト）
 * - anchor: 詳細セクションへのアンカー（見出しから自動生成されるID）
 * - headline: ページのタイトル
 * - about: 質問の主題（1〜3語のキーワード。JSON-LD WebPage.about に使われる）
 * - datePublished: 質問日（ISO 8601: YYYY-MM-DD）
 */

export interface QA {
  /** 質問文（例: "通報後に作成する文書と保存期間は。"） */
  question: string;
  /** 答弁概要のテキスト（リンク構文を含まないプレーンテキスト） */
  answer: string;
  /** 詳細セクションへのアンカー（例: "-通報後に作成する文書と保存期間は"） */
  anchor: string;
}

export interface Props {
  /** Q&A の配列 */
  qa: QA[];
  /** ページの表題 */
  headline?: string;
  /** 質問の主題（1〜3語。例: "障害者虐待"、"いじめ重大事態"、"公文書管理"） */
  about?: string;
  /** 公開日（ISO 8601形式: YYYY-MM-DD） */
  datePublished?: string;
}

const { qa, headline, about, datePublished } = Astro.props;
---

{
  qa.length > 0 && (
    <script type="application/ld+json" is:inline set:html={JSON.stringify({
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebPage",
          ...(headline && { name: headline }),
          ...(about && { about: { "@type": "Thing", name: about } }),
          ...(datePublished && { datePublished }),
          "mainEntity": { "@id": "#faq" },
        },
        {
          "@type": "FAQPage",
          "@id": "#faq",
          ...(headline && { headline }),
          "mainEntity": qa.map((item) => ({
            "@type": "Question",
            "name": item.question,
            "acceptedAnswer": {
              "@type": "Answer",
              "text": item.answer,
            },
          })),
        },
      ].filter(Boolean),
    })} />
  )
}

<!-- まとめ表（人間向け） -->
<table>
  <thead>
    <tr>
      <th>質問</th>
      <th>答弁概要（クリックで詳細）</th>
    </tr>
  </thead>
  <tbody>
    {qa.map((item) => (
      <tr>
        <td>{item.question}</td>
        <td><a href={`#${item.anchor}`}>{item.answer}</a></td>
      </tr>
    ))}
  </tbody>
</table>