// 6. 当日用 自己紹介カード - リベシティ公式名札ガイド準拠版
// ハガキサイズ(100×148mm 縦長)を標準とし、横長・シール・縦型ミニのバリエーション

function ScreenBadge({ theme }) {
  const s = useStore();
  const [layout, setLayout] = React.useState('vertical'); // vertical | horizontal
  const p = s.participants[0] || PARTICIPANTS_SEED[0];

  return (
    <Phone theme={theme}>
      <StatusBar theme={theme} />

      {/* ヘッダー */}
      <div style={{ padding: '12px 20px 4px' }}>
        <div style={{ fontSize: 15, fontWeight: 800, fontFamily: theme.headingFont }}>当日の名札</div>
        <div style={{ fontSize: 11, color: theme.textMuted, marginTop: 2, lineHeight: 1.5 }}>
          ハガキサイズ推奨 · コンビニで印刷 → 名札ケースへ
        </div>
      </div>

      {/* フォーマット切替 */}
      <div style={{ padding: '10px 16px 0' }}>
        <div style={{
          display: 'flex', gap: 0, background: theme.chipBg,
          padding: 3, borderRadius: 99,
        }}>
          {[
            { id: 'vertical', label: '縦長 (推奨)' },
            { id: 'horizontal', label: '横長' },
          ].map(m => (
            <button key={m.id} onClick={() => setLayout(m.id)}
              style={{
                flex: 1, padding: '7px 8px', border: 'none', cursor: 'pointer',
                borderRadius: 99, fontSize: 12, fontWeight: 700,
                background: layout === m.id ? theme.surface : 'transparent',
                color: layout === m.id ? theme.text : theme.textMuted,
                boxShadow: layout === m.id ? `0 1px 3px ${theme.text}10` : 'none',
                fontFamily: theme.bodyFont, transition: 'all .15s',
              }}>{m.label}</button>
          ))}
        </div>
      </div>

      {/* プレビュー */}
      <div style={{
        padding: '20px 0',
        background: `radial-gradient(ellipse at center top, ${theme.primarySoft} 0%, ${theme.bg} 80%)`,
        marginTop: 12,
        position: 'relative',
      }}>
        <Pattern theme={theme} intensity={0.5} />

        {/* ストラップ (首掛けプレビュー) */}
        <div style={{
          position: 'relative', width: 140, height: 28, margin: '0 auto',
        }}>
          <svg width="140" height="28" viewBox="0 0 140 28" style={{ position: 'absolute', inset: 0 }}>
            <path d="M14 0 Q70 22 126 0" stroke={theme.accent} strokeWidth="5"
              fill="none" strokeLinecap="round" />
          </svg>
        </div>

        {layout === 'vertical' ? <BadgeVertical theme={theme} p={p} /> : <BadgeHorizontal theme={theme} p={p} />}

        {/* 寸法注記 */}
        <div style={{
          textAlign: 'center', marginTop: 16,
          fontSize: 10.5, color: theme.textSub, letterSpacing: 0.5,
        }}>
          {layout === 'vertical' ? 'ハガキサイズ 100 × 148 mm (縦長)' : '横長フォーマット 148 × 100 mm'}
          <br/><span style={{ fontSize: 9.5 }}>※リベシティ推奨サイズ · ハガキ印刷対応</span>
        </div>
      </div>

      {/* アクション */}
      <div style={{ padding: '14px 16px 8px', display: 'flex', gap: 8 }}>
        <Btn theme={theme} fullWidth size="md">PNG ダウンロード</Btn>
        <Btn theme={theme} variant="plain" size="md">編集</Btn>
      </div>

      {/* バリエーション */}
      <div style={{ padding: '8px 16px 16px' }}>
        <SectionTitle theme={theme} kicker="VARIATIONS">その他のフォーマット</SectionTitle>

        <Card theme={theme} padding={12} style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{
              width: 44, height: 60, background: theme.surface,
              border: `1.5px solid ${theme.text}`, borderRadius: 4,
              overflow: 'hidden', flexShrink: 0,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ height: 6, background: theme.primary }}></div>
              <div style={{ flex: 1, padding: 3, textAlign: 'center',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 2 }}>
                <div style={{ fontSize: 8, fontWeight: 900, fontFamily: theme.headingFont,
                  lineHeight: 1, color: theme.text }}>{p.name}</div>
                <QRPlaceholder theme={theme} size={20} />
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>名刺サイズ</div>
              <div style={{ fontSize: 11, color: theme.textMuted, marginTop: 2, lineHeight: 1.5 }}>
                55 × 91 mm / 胸ポケット収納可。サブ用に。
              </div>
            </div>
            <Btn theme={theme} size="sm" variant="plain">作成</Btn>
          </div>
        </Card>

        <Card theme={theme} padding={12} style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{
              width: 50, height: 50, borderRadius: '50%',
              background: theme.primarySoft, border: `1.5px dashed ${theme.primary}`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, color: theme.primary,
            }}>
              <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: 1 }}>HELLO</div>
              <div style={{ fontSize: 11, fontWeight: 900, fontFamily: theme.headingFont, lineHeight: 1 }}>
                {p.name}
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>シール型 (HELLO)</div>
              <div style={{ fontSize: 11, color: theme.textMuted, marginTop: 2, lineHeight: 1.5 }}>
                直径 60mm / カジュアル交流向け。胸に貼るだけ。
              </div>
            </div>
            <Btn theme={theme} size="sm" variant="plain">作成</Btn>
          </div>
        </Card>

        {/* 印刷ガイド */}
        <Card theme={theme} padding={14} style={{ background: theme.surfaceAlt, border: 'none' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: theme.primary,
            letterSpacing: 1, marginBottom: 6 }}>
            HOW TO USE
          </div>
          <div style={{ fontSize: 12, color: theme.text, lineHeight: 1.7 }}>
            <strong>1.</strong> PNGをダウンロード<br/>
            <strong>2.</strong> コンビニのマルチコピー機「はがき印刷」で出力<br/>
            <strong>3.</strong> 名札ケースに入れて首掛け・胸元へ
          </div>
        </Card>
      </div>
    </Phone>
  );
}

// 縦長ハガキ (推奨)
function BadgeVertical({ theme, p }) {
  const area = MIE_AREAS.find(a => a.id === p.area);
  const themes = (p.themes || []).slice(0, 3).map(t => THEME_BY_ID[t]).filter(Boolean);

  return (
    <div style={{
      position: 'relative', width: 248, margin: '0 auto',
      aspectRatio: '100/148',
      background: theme.surface,
      borderRadius: theme.radius,
      border: `2px solid ${theme.text}`,
      overflow: 'hidden',
      boxShadow: `0 10px 28px ${theme.text}28`,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* パンチ穴 */}
      <div style={{
        position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
        width: 28, height: 6, background: theme.bg,
        border: `1px solid ${theme.border}`, borderRadius: 99, zIndex: 2,
      }}></div>

      {/* 上部バー */}
      <div style={{
        padding: '14px 14px 8px',
        background: theme.primary, color: theme.primaryFg,
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: 2, opacity: 0.85 }}>
          MIE OFFLINE MEETUP
        </div>
        <div style={{ fontSize: 10, fontWeight: 700, marginTop: 2 }}>
          2026.08.11 (火・祝) · 三重県文化会館
        </div>
      </div>

      {/* 初参加リボン */}
      {p.count === 'first' && (
        <div style={{
          position: 'absolute', top: 38, right: -8,
          padding: '3px 10px', background: theme.accent, color: '#fff',
          fontSize: 9, fontWeight: 800, letterSpacing: 1,
          transform: 'rotate(6deg)',
          boxShadow: `0 2px 4px ${theme.text}20`,
        }}>初参加</div>
      )}

      {/* メイン: 名前を最大化 */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center',
        padding: '16px 14px 12px', textAlign: 'center',
      }}>
        <div style={{ fontSize: 9, fontWeight: 700, color: theme.textSub,
          letterSpacing: 2, marginBottom: 6 }}>
          NICKNAME
        </div>
        <div style={{
          fontFamily: theme.headingFont,
          fontSize: 48, fontWeight: 900,
          color: theme.text, lineHeight: 1,
          letterSpacing: -1.5,
          marginBottom: 8,
        }}>{p.name}</div>
        <div style={{ fontSize: 11, color: theme.textMuted, marginBottom: 10 }}>
          {area?.label}{p.age && ` · ${p.age}`}
        </div>

        {/* タグ */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3, justifyContent: 'center', maxWidth: 200 }}>
          {themes.map(t => (
            <Chip key={t.id} theme={theme} color={t.color} active size="sm">{t.label}</Chip>
          ))}
        </div>
      </div>

      {/* 話したいこと */}
      {p.talk && (
        <div style={{
          margin: '0 14px 12px',
          padding: '8px 10px',
          background: theme.surfaceAlt,
          borderRadius: theme.radius - 4,
          borderLeft: `3px solid ${theme.accent}`,
        }}>
          <div style={{ fontSize: 8, fontWeight: 800, color: theme.accent,
            letterSpacing: 1, marginBottom: 2 }}>
            話したいこと
          </div>
          <div style={{ fontSize: 10.5, color: theme.text, lineHeight: 1.4 }}>{p.talk}</div>
        </div>
      )}

      {/* 下部: QRコード */}
      <div style={{
        padding: '10px 14px',
        background: theme.surfaceAlt,
        borderTop: `1px dashed ${theme.border}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <QRPlaceholder theme={theme} size={50} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 8, fontWeight: 700, color: theme.textMuted,
            letterSpacing: 1, marginBottom: 2 }}>
            SCAN TO CONNECT
          </div>
          <div style={{ fontSize: 9.5, color: theme.textMuted, lineHeight: 1.4 }}>
            プロフィールを<br/>共有
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 7.5, color: theme.textSub, letterSpacing: 1 }}>ID</div>
          <div style={{ fontSize: 11, fontWeight: 700, color: theme.text,
            fontFeatureSettings: '"tnum"' }}>
            #{String(p.id).padStart(4, '0')}
          </div>
        </div>
      </div>
    </div>
  );
}

// 横長 (148×100mm)
function BadgeHorizontal({ theme, p }) {
  const area = MIE_AREAS.find(a => a.id === p.area);
  const themes = (p.themes || []).slice(0, 4).map(t => THEME_BY_ID[t]).filter(Boolean);

  return (
    <div style={{
      position: 'relative', width: 320, margin: '0 auto',
      aspectRatio: '148/100',
      background: theme.surface,
      borderRadius: theme.radius,
      border: `2px solid ${theme.text}`,
      overflow: 'hidden',
      boxShadow: `0 10px 28px ${theme.text}28`,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* パンチ穴 (横長は上部中央) */}
      <div style={{
        position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
        width: 28, height: 6, background: theme.bg,
        border: `1px solid ${theme.border}`, borderRadius: 99, zIndex: 2,
      }}></div>

      {/* 上部バー */}
      <div style={{
        height: 22, background: theme.primary, color: theme.primaryFg,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 12px',
      }}>
        <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: 1.5, opacity: 0.85 }}>
          MIE OFFLINE MEETUP · 2026.08.11
        </div>
        {p.count === 'first' && (
          <div style={{
            fontSize: 8, padding: '1px 5px', background: '#fff',
            color: theme.primary, borderRadius: 99, fontWeight: 800,
          }}>初参加</div>
        )}
      </div>

      {/* 本体 */}
      <div style={{ flex: 1, display: 'flex', padding: '12px 12px 0', gap: 10 }}>
        {/* 左: 名前 */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 8, fontWeight: 700, color: theme.textSub,
            letterSpacing: 1.5, marginBottom: 2 }}>
            NICKNAME
          </div>
          <div style={{
            fontFamily: theme.headingFont, fontSize: 36, fontWeight: 900,
            color: theme.text, lineHeight: 1, letterSpacing: -1, marginBottom: 4,
          }}>{p.name}</div>
          <div style={{ fontSize: 10, color: theme.textMuted, marginBottom: 6 }}>
            {area?.label}{p.age && ` · ${p.age}`}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
            {themes.slice(0, 3).map(t => (
              <Chip key={t.id} theme={theme} color={t.color} active size="sm">{t.label}</Chip>
            ))}
          </div>
        </div>

        {/* 右: QR */}
        <div style={{ textAlign: 'center', flexShrink: 0 }}>
          <QRPlaceholder theme={theme} size={66} />
          <div style={{ fontSize: 8, color: theme.textMuted, marginTop: 3,
            fontFeatureSettings: '"tnum"', letterSpacing: 0.5 }}>
            #{String(p.id).padStart(4, '0')}
          </div>
        </div>
      </div>

      {/* 話したいこと */}
      {p.talk && (
        <div style={{
          margin: '8px 12px 10px', padding: '6px 10px',
          background: theme.surfaceAlt, borderRadius: theme.radius - 4,
          borderLeft: `3px solid ${theme.accent}`,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ fontSize: 8, fontWeight: 800, color: theme.accent,
            letterSpacing: 1, flexShrink: 0,
            padding: '1px 4px', background: theme.accentSoft, borderRadius: 3,
          }}>TALK</div>
          <div style={{ fontSize: 10, color: theme.text, lineHeight: 1.4,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {p.talk}
          </div>
        </div>
      )}
    </div>
  );
}

function QRPlaceholder({ theme, size }) {
  const cells = 9;
  const pattern = [
    1,1,1,1,1,1,1,0,1,
    1,0,0,0,0,0,1,1,0,
    1,0,1,1,1,0,1,0,1,
    1,0,1,1,1,0,1,1,1,
    1,0,0,0,0,0,1,0,0,
    1,1,1,1,1,1,1,1,0,
    0,1,0,1,0,1,0,0,1,
    1,0,1,0,1,0,1,1,0,
    0,1,1,1,1,0,1,0,1,
  ];
  return (
    <div style={{
      width: size, height: size, background: '#fff',
      padding: 3, boxSizing: 'border-box',
      border: `1.5px solid ${theme.text}`, borderRadius: 4, flexShrink: 0,
    }}>
      <svg width={size - 6} height={size - 6} viewBox={`0 0 ${cells} ${cells}`}>
        {pattern.map((on, i) => on ? (
          <rect key={i} x={i % cells} y={Math.floor(i / cells)} width="1" height="1" fill={theme.text} />
        ) : null)}
      </svg>
    </div>
  );
}

Object.assign(window, { ScreenBadge });