// メインアプリ - Design Canvasに3案 × 各画面を配置

const MOBILE_SCREENS = [
  { id: 'top', label: 'トップ', Component: window.ScreenTop },
  { id: 'survey', label: '事前アンケート', Component: window.ScreenSurvey },
  { id: 'list', label: '参加者一覧', Component: window.ScreenList },
  { id: 'filter', label: 'テーマフィルター', Component: window.ScreenFilter },
  { id: 'dashboard', label: 'ダッシュボード (モバイル)', Component: window.ScreenDashboard },
  { id: 'badge', label: '当日カード (ハガキ)', Component: window.ScreenBadge },
];

const THEME_ORDER = ['natsu', 'ise', 'shinrai'];

const ARTBOARD_W = 390;
const ARTBOARD_H = 800;

const DESK_W = 1280;
const DESK_H = 800;

function App() {
  // ストア変更でキャンバス全体を再描画 (フォーム送信 → 全画面に反映)
  useStore();

  return (
    <DesignCanvas>
      {/* 操作ガイド */}
      <DCPostIt x={40} y={40} width={340}>
        <strong>📌 操作ガイド</strong><br/>
        <span style={{ fontSize: 11, opacity: 0.9, lineHeight: 1.7 }}>
          ・各カードの<strong>右上のボタン</strong>で全画面表示<br/>
          ・スクロール/ピンチでズーム、ドラッグで移動<br/>
          ・テキストやラベルはクリックで編集可能
        </span>
      </DCPostIt>

      <DCPostIt x={400} y={40} width={340}>
        <strong>🔗 インタラクション</strong><br/>
        <span style={{ fontSize: 11, opacity: 0.9, lineHeight: 1.7 }}>
          <strong>「事前アンケート」</strong>を全画面で開いて回答すると、
          <strong>参加者一覧</strong>と<strong>ダッシュボード</strong>に即時反映されます。
        </span>
      </DCPostIt>

      <DCPostIt x={760} y={40} width={340}>
        <strong>🎨 ビジュアル3案</strong><br/>
        <span style={{ fontSize: 11, opacity: 0.9, lineHeight: 1.7 }}>
          <strong>A:</strong> 夏祭り暖色 / <strong>B:</strong> 伊勢ブルー / <strong>C:</strong> 信頼ネイビー<br/>
          下に縦に3案並んでいます。各案 6画面 + デスクトップ版 DB。
        </span>
      </DCPostIt>

      {THEME_ORDER.map(themeId => {
        const theme = THEMES[themeId];
        return (
          <DCSection key={themeId} id={themeId}
            title={theme.name}
            subtitle={theme.tagline}>
            {MOBILE_SCREENS.map(s => {
              const C = s.Component;
              return (
                <DCArtboard key={`${themeId}-${s.id}`}
                  id={`${themeId}-${s.id}`}
                  label={s.label}
                  width={ARTBOARD_W} height={ARTBOARD_H}>
                  <C theme={theme} />
                </DCArtboard>
              );
            })}
            {/* デスクトップ版ダッシュボード */}
            <DCArtboard id={`${themeId}-dashboard-desktop`}
              label="ダッシュボード (デスクトップ)"
              width={DESK_W} height={DESK_H}>
              <ScreenDashboardDesktop theme={theme} />
            </DCArtboard>
          </DCSection>
        );
      })}
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);