import { Button, Collapsible, TextContainer } from '@shopify/polaris';
import { useState, useCallback } from 'react';

function CollapsibleExample() {
  const [open, setOpen] = useState(false);
  const toggle = useCallback(() => setOpen(o => !o), []);

  return (
    <>
      <Button onClick={toggle}>
        {open ? '閉じる' : '詳細設定を表示'}
      </Button>
      <Collapsible open={open}>
        <TextContainer>
          <p>ここに詳細設定の内容が表示されます。</p>
        </TextContainer>
      </Collapsible>
    </>
  );
}

const [open, setOpen] = useState(false);
const toggle = useCallback(() => setOpen(o => !o), []);

  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home">Home</Link>
        <Link to="/app/additional">Additional page</Link>
        <Link to="/app/advanced">応用編ページ</Link> {/* ← この行を追加 */}
      </NavMenu>
      <Outlet />
    </AppProvider>
  );

app.advanced.tsx

import { Page, Card, IndexTable, Text, Layout } from '@shopify/polaris';

function AdvancedProductListPage() {
  // 商品データ（今回はダミーデータ）
  const products = [
    { id: '1', name: 'りんご飴一生タダ券', price: 500, stock: 10 },
    { id: '2', name: '二郎ラーメン一生タダ券', price: 1000, stock: 5 },
    { id: '3', name: '焼肉無限一生タダ券', price: 10000, stock: 20 },
  ];

  // IndexTableに必要なリソース名の設定（単数・複数）
  const resourceName = {
    singular: '商品',       // 単数形
    plural: '商品一覧',     // 複数形
  };

  return (
    <Page title="応用編ページを作成しよう！">
      <Layout>
        <Layout.Section>
          <Card>
            {/* IndexTable はリスト表示に特化したテーブルコンポーネント */}
            <IndexTable
              resourceName={resourceName}  
              itemCount={products.length}
              headings={[
                { title: '商品名' },
                { title: '価格' },
                { title: '在庫数' },
              ]}
            >
              {/* products 配列を map でループし、各商品の行を作成 */}
              {products.map(({ id, name, price, stock }, index) => (
                <IndexTable.Row
                  id={id}               // 各行のユニークID
                  key={id}              // React の key 属性
                  position={index}      // 行の位置（IndexTableのために必要）
                >
                  {/* 商品名 */}
                  <IndexTable.Cell>
                    <Text as="span">{name}</Text>
                  </IndexTable.Cell>

                  {/* 価格（¥記号を付与） */}
                  <IndexTable.Cell>
                    <Text as="span">¥{price}</Text>
                  </IndexTable.Cell>

                  {/* 在庫数（「枚」を付けて表示） */}
                  <IndexTable.Cell>
                    <Text as="span">{stock} 枚</Text>
                  </IndexTable.Cell>
                </IndexTable.Row>
              ))}
            </IndexTable>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

export default AdvancedProductListPage;

export default AdvancedProductListPage;

const products = [...];

<IndexTable
  resourceName={resourceName}
  itemCount={products.length}
  headings={[...]}
>

products.map(({ id, name, ... }) => (
  <IndexTable.Row id={id} key={id} position={index}>

<IndexTable.Cell>
  <Text as="span">{name}</Text>
</IndexTable.Cell>

import { Page, Card, IndexTable, Text, Layout, Button, Collapsible, Link } from '@shopify/polaris';
import { useState, useCallback } from 'react';　 // ← 状態管理用のReactフックを追加

export default function AdvancedProductListPage() {
	const [open, setOpen] = useState(false);　 // 「開いてるかどうか」を管理（初期状態は閉じてる）
	const toggleOpen = useCallback(() => setOpen((open) => !open), []);　 // ボタンを押すたびに開閉を切り替える関数

return (
  <Page title="応用編ページを作成しよう！">
    {/* Layout は画面を複数のセクションに分割できるコンポーネント */}
    <Layout>
	    {/* ▼ここから追加！ */}
      <Layout.Section>
        <Card>
          <div style={{ padding: '16px' }}>
            <Button onClick={toggleOpen}>
              {open ? '説明を隠す' : '説明を表示'}
            </Button>

            <Collapsible open={open} id="説明セクション">
              <div style={{ paddingTop: '16px' }}>
                <Text as="p" variant="bodyMd">
                  このページでは、Shopify Polarisの<strong>Index table</strong>を使って、シンプルな商品一覧を表示しています。
                  また、<strong>Collapsible</strong>を使って説明文を開閉できるようにすることで、UIの情報量をコントロールしています。
                </Text>

                <div style={{ marginTop: '12px' }}>
                  <Text as="h2" variant="headingMd">
                    Index tableとは？<br />
                  </Text>
                </div>
                <Text as="p" variant="bodyMd">
                  Shopifyアプリでのデータ一覧表示に最適な、Polarisが提供する標準テーブルコンポーネントです。
                  <br />
                  ➤{' '}
                  <Link
                    url="https://polaris.shopify.com/components/tables/index-table?example=index-table-default"
                    target="_blank"
                  >
                    Polaris公式：Index tableのドキュメント<br />
                  </Link>
                </Text>

                <div style={{ marginTop: '12px' }}>
                  <Text as="h2" variant="headingMd">
                    Collapsibleとは？<br />
                  </Text>
                </div>
                <Text as="p" variant="bodyMd">
                  説明文などを折りたたんで表示したい時に使えるPolarisのコンポーネントです。
                  <br />
                  ➤{' '}
                  <Link
                    url="https://polaris.shopify.com/components/behaviors/collapsible"
                    target="_blank"
                  >
                    Polaris公式：Collapsibleのドキュメント<br />
                  </Link>
                </Text>
              </div>
            </Collapsible>
          </div>
        </Card>
      </Layout.Section>
      {/* ▲ここまで追加！ */}
      
      {/* 商品一覧エリア（4.2の内容） */}
      <Layout.Section>