// 4. 参加者一覧・プロフィールカード

function ScreenList({ theme }) {
  const s = useStore();
  const [search, setSearch] = React.useState('');
  const [activeTag, setActiveTag] = React.useState(null);
  const [openId, setOpenId] = React.useState(null);

  const filtered = s.participants.filter(p => {
    if (search && !`${p.name}${p.spot || ''}${p.talk || ''}`.includes(search)) return false;
    if (activeTag && !p.themes?.includes(activeTag)) return false;
    return true;
  });

  const popularTags = ALL_THEMES_FLAT.map(t => ({
    ...t, count: s.participants.filter(p => p.themes?.includes(t.id)).length,
  })).sort((a, b) => b.count - a.count).slice(0, 6);

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

      {/* ヘッダー */}
      <div style={{
        padding: '12px 16px 14px', background: theme.surface,
        borderBottom: `1px solid ${theme.border}`,
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, fontFamily: theme.headingFont }}>
              参加者一覧
            </div>
            <div style={{ fontSize: 11, color: theme.textMuted }}>
              {filtered.length}名 表示中 / 全{s.participants.length}名
            </div>
          </div>
          <Btn theme={theme} size="sm" variant="soft">並替 ▾</Btn>
        </div>

        {/* 検索 */}
        <div style={{ position: 'relative' }}>
          <input value={search} onChange={e => setSearch(e.target.value)}
            placeholder="名前・スポット・話したいことで検索"
            style={{
              width: '100%', padding: '9px 12px 9px 32px',
              borderRadius: 999, border: `1.5px solid ${theme.border}`,
              background: theme.surfaceAlt, color: theme.text, fontSize: 13,
              outline: 'none', boxSizing: 'border-box',
              fontFamily: theme.bodyFont,
            }} />
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
            fontSize: 14, color: theme.textSub }}>⌕</span>
        </div>

        {/* 人気タグ - 横スクロール */}
        <div style={{ display: 'flex', gap: 6, marginTop: 10, overflowX: 'auto',
          paddingBottom: 2, scrollbarWidth: 'none' }}>
          <Chip theme={theme} active={!activeTag} onClick={() => setActiveTag(null)} size="sm">
            すべて
          </Chip>
          {popularTags.map(t => (
            <Chip key={t.id} theme={theme} color={t.color} size="sm"
              active={activeTag === t.id}
              onClick={() => setActiveTag(activeTag === t.id ? null : t.id)}>
              {t.label} <span style={{ opacity: 0.6, marginLeft: 2 }}>{t.count}</span>
            </Chip>
          ))}
        </div>
      </div>

      {/* リスト */}
      <div style={{ padding: '10px 12px 24px' }}>
        {filtered.map(p => (
          <ProfileCard key={p.id} theme={theme} p={p}
            expanded={openId === p.id}
            onToggle={() => setOpenId(openId === p.id ? null : p.id)} />
        ))}
        {filtered.length === 0 && (
          <div style={{ padding: 40, textAlign: 'center', color: theme.textMuted, fontSize: 13 }}>
            該当する参加者が見つかりません
          </div>
        )}
      </div>
    </Phone>
  );
}

function ProfileCard({ theme, p, expanded, onToggle }) {
  const area = MIE_AREAS.find(a => a.id === p.area);
  return (
    <div style={{
      background: theme.surface,
      borderRadius: theme.radius,
      border: `1px solid ${theme.border}`,
      marginBottom: 8,
      overflow: 'hidden',
      transition: 'all .2s',
    }}>
      <div onClick={onToggle} style={{ padding: '12px 14px', cursor: 'pointer', display: 'flex', gap: 12 }}>
        <Avatar theme={theme} name={p.name} size={44} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
            <span style={{ fontSize: 15, fontWeight: 700, color: theme.text }}>{p.name}</span>
            {p.count === 'first' && (
              <span style={{
                fontSize: 9, padding: '1px 4px', background: theme.accent, color: '#fff',
                borderRadius: 3, fontWeight: 700,
              }}>初参加</span>
            )}
          </div>
          <div style={{ fontSize: 11, color: theme.textMuted, marginBottom: 6 }}>
            {area?.label}
            {p.age && ` · ${p.age}`}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {p.themes?.slice(0, 3).map(tid => {
              const tag = THEME_BY_ID[tid];
              return tag ? (
                <Chip key={tid} theme={theme} color={tag.color} size="sm" active>{tag.label}</Chip>
              ) : null;
            })}
            {p.themes?.length > 3 && (
              <span style={{ fontSize: 11, color: theme.textMuted, alignSelf: 'center' }}>
                +{p.themes.length - 3}
              </span>
            )}
          </div>
        </div>
        <span style={{ fontSize: 12, color: theme.textSub, alignSelf: 'flex-start' }}>
          {expanded ? '▴' : '▾'}
        </span>
      </div>

      {expanded && (
        <div style={{ padding: '0 14px 14px', borderTop: `1px dashed ${theme.border}` }}>
          {p.talk && (
            <div style={{ marginTop: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
                話したいこと
              </div>
              <div style={{ fontSize: 13, color: theme.text, lineHeight: 1.6 }}>{p.talk}</div>
            </div>
          )}
          {p.action && (
            <div style={{ marginTop: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
                最近の小さい行動
              </div>
              <div style={{ fontSize: 13, color: theme.text, lineHeight: 1.6 }}>{p.action}</div>
            </div>
          )}
          {p.spot && (
            <div style={{ marginTop: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: theme.primary, letterSpacing: 1, marginBottom: 4 }}>
                好きな三重スポット
              </div>
              <div style={{ fontSize: 13, color: theme.text, lineHeight: 1.6 }}>{p.spot}</div>
            </div>
          )}
          {p.message && (
            <Card theme={theme} padding={12} style={{
              marginTop: 12, background: theme.surfaceAlt, border: 'none',
            }}>
              <div style={{ fontSize: 12, color: theme.textMuted, fontStyle: 'italic', lineHeight: 1.6 }}>
                "{p.message}"
              </div>
            </Card>
          )}
          <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
            <Btn theme={theme} size="sm" fullWidth>当日声をかける</Btn>
            <Btn theme={theme} size="sm" variant="plain">★ ブックマーク</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenList });