// page-concerts.jsx — 演奏会の記録
// データは window.A_DATA_CONCERTS（a-data.jsx）から取得。
// 新しい記録を追加する際は a-data.jsx のリストの先頭にオブジェクトを足してください。

(function() {
  function ConcertRecord({ c, isM, T }) {
    const hasImages = c.images && c.images.length;
    return (
      <article style={{
        background: T.bg,
        border:`1px solid ${T.rule}`,
        padding: isM ? '28px 22px' : '44px 48px',
        marginBottom: isM ? 28 : 40,
        position:'relative',
      }}>
        {c.featured && (
          <div style={{
            position:'absolute', top:-1, left:-1, right:-1, height:4,
            background: `linear-gradient(90deg, ${T.wine}, ${T.gold}, ${T.wine})`,
          }}/>
        )}

        {/* Title block */}
        <header style={{marginBottom: isM ? 22 : 32}}>
          <h3 style={{
            fontFamily: T.fontSerif, fontWeight:500,
            fontSize: isM ? 20 : 26,
            margin:'0 0 14px',
            color: T.wine, letterSpacing:'.06em',
            lineHeight:1.5,
          }}>{c.title}</h3>
          <div style={{
            display:'flex', flexWrap:'wrap',
            gap: isM ? '6px 20px' : '6px 32px',
            fontFamily: T.fontSerif,
            fontSize: isM ? 13 : 14,
            lineHeight:1.8,
            color: T.ink,
          }}>
            {[
              ['日 時', c.date],
              ['会 場', c.venue],
              c.conductor && ['指 揮', c.conductor],
              c.pianist   && ['ピアノ', c.pianist],
              c.reciter   && ['朗 読', c.reciter],
            ].filter(Boolean).map(([label, value]) => (
              <span key={label}>
                <span style={{color: T.gold, letterSpacing:'.1em', marginRight:6}}>{label}</span>
                {value}
              </span>
            ))}
          </div>
        </header>

        {/* Photos */}
        {hasImages && (
          <div style={{
            display:'grid',
            gridTemplateColumns: c.images.length === 1
              ? '1fr'
              : isM ? 'repeat(2, 1fr)' : `repeat(${Math.min(c.images.length, 3)}, 1fr)`,
            gap:10,
            marginBottom: isM ? 22 : 32,
          }}>
            {c.images.map((src, i) => (
              <div key={i} style={{
                aspectRatio: c.images.length === 1 ? '16/9' : '4/3',
                backgroundImage:`url(${src})`,
                backgroundSize:'cover',
                backgroundPosition:'center',
                background: `#1a1410 url(${src}) center/cover`,
                boxShadow:`0 2px 12px rgba(0,0,0,.08)`,
              }}/>
            ))}
          </div>
        )}

        {/* Stages (multi-stage concerts) or flat program list */}
        {c.stages && c.stages.length > 0 && (
          <div>
            {c.stages.map((s, i) => (
              <div key={i} style={{
                marginBottom: isM ? 18 : 24,
                paddingLeft: isM ? 14 : 20,
                borderLeft: `2px solid ${T.gold}`,
              }}>
                <div style={{
                  fontFamily: T.fontSerif, fontWeight:600,
                  fontSize: isM ? 14 : 16,
                  color: T.wine, marginBottom:4,
                  letterSpacing:'.06em',
                }}>{s.title}</div>
                {s.subtitle && (
                  <div style={{
                    fontFamily: T.fontSerif, fontSize: isM ? 13 : 14,
                    color: T.inkSoft, marginBottom:10,
                  }}>{s.subtitle}</div>
                )}
                <ProgramList items={s.program} isM={isM} T={T} compact/>
                {s.encore && (
                  <div style={{
                    fontFamily: T.fontSerif, fontSize: isM ? 12 : 13,
                    color: T.inkSoft, marginTop:8, fontStyle:'italic',
                  }}>{s.encore}</div>
                )}
              </div>
            ))}
          </div>
        )}

        {c.program && (
          <div style={{
            marginBottom: c.report ? (isM ? 22 : 28) : 0,
          }}>
            <div style={{
              fontFamily: T.fontSerifEn, fontStyle:'italic',
              fontSize:12, letterSpacing:'.3em',
              color: T.gold, marginBottom:10,
            }}>PROGRAM</div>
            <ProgramList items={c.program} isM={isM} T={T}/>
          </div>
        )}

        {/* Report */}
        {c.report && (
          <div style={{
            marginTop: isM ? 22 : 28,
            padding: isM ? '18px 20px' : '22px 28px',
            background: T.bgAlt,
            position:'relative',
          }}>
            <div style={{
              position:'absolute', top:0, left:0, width:3, height:'100%',
              background: T.wine,
            }}/>
            <div style={{
              fontFamily: T.fontSerifEn, fontStyle:'italic',
              fontSize:11, letterSpacing:'.3em',
              color: T.gold, marginBottom:8,
            }}>REPORT</div>
            <p style={{
              fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
              lineHeight:1.95, color: T.ink, margin:0,
            }}>{c.report}</p>
          </div>
        )}
      </article>
    );
  }

  function ProgramList({ items, isM, T, compact }) {
    return (
      <ul style={{
        listStyle:'none', padding:0, margin:0,
        fontFamily: T.fontSerif,
      }}>
        {items.map((p, i) => (
          <li key={i} style={{
            display:'grid',
            gridTemplateColumns: isM ? '1fr' : '1fr auto',
            gap: isM ? 2 : 18,
            padding: compact ? '4px 0' : '6px 0',
            fontSize: isM ? 14 : 15,
            color: T.ink,
            alignItems:'baseline',
          }}>
            <div style={{lineHeight:1.6}}>
              <span style={{fontWeight:500}}>{p.title}</span>
              {p.note && <span style={{
                fontSize:12, color: T.gold, marginLeft:10, fontStyle:'italic',
              }}>（{p.note}）</span>}
            </div>
            <div style={{
              fontSize: isM ? 12 : 13,
              color: T.inkSoft, lineHeight:1.6,
              whiteSpace: isM ? 'normal' : 'nowrap',
            }}>
              {p.lyrics && <span>作詩 {p.lyrics}</span>}
              {p.lyrics && p.composer && <span style={{margin:'0 6px', color: T.gold}}>／</span>}
              {p.composer && <span>作曲 {p.composer}</span>}
              {p.arranger && <span><span style={{margin:'0 6px', color: T.gold}}>／</span>編曲 {p.arranger}</span>}
            </div>
          </li>
        ))}
      </ul>
    );
  }

  window.PageConcerts = function PageConcerts({ mobile }) {
    const T = window.A_TOKENS;
    const isM = mobile;

    // Group by year
    const byYear = {};
    window.A_DATA_CONCERTS.forEach(c => {
      if (!byYear[c.year]) byYear[c.year] = [];
      byYear[c.year].push(c);
    });
    const years = Object.keys(byYear).map(Number).sort((a,b) => b - a);
    const [activeYear, setActiveYear] = React.useState(years[0]);

    return (
      <>
        <window.APageTitle en="CONCERT RECORDS" jp="演奏会の記録" mobile={isM}/>

        {/* Year tabs */}
        <section style={{
          background: T.bg,
          borderBottom:`1px solid ${T.rule}`,
          padding: isM ? '0 16px' : '0 60px',
          position:'sticky', top:0, zIndex:5,
        }}>
          <div style={{
            maxWidth:1100, margin:'0 auto',
            display:'flex', gap:isM ? 4 : 8,
            overflowX:'auto',
          }}>
            {years.map(y => (
              <button
                key={y}
                onClick={() => setActiveYear(y)}
                style={{
                  background:'transparent', border:'none', cursor:'pointer',
                  padding: isM ? '14px 16px' : '18px 28px',
                  fontFamily: T.fontSerif,
                  fontSize: isM ? 16 : 18,
                  color: activeYear === y ? T.wine : T.inkSoft,
                  fontWeight: activeYear === y ? 600 : 500,
                  letterSpacing:'.08em',
                  borderBottom: activeYear === y ? `3px solid ${T.wine}` : '3px solid transparent',
                  whiteSpace:'nowrap',
                  marginBottom:-1,
                }}
              >
                {y}<span style={{fontSize:'.7em', marginLeft:2}}>年</span>
              </button>
            ))}
          </div>
        </section>

        <section style={{
          padding: isM ? '40px 16px 60px' : '60px 60px 100px',
          background: T.bgAlt,
        }}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14,
              marginBottom: isM ? 24 : 36,
            }}>
              <span style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize: isM ? 32 : 48, color: T.wine, fontWeight:500,
              }}>{activeYear}</span>
              <span style={{
                fontFamily: T.fontSerif, fontSize: isM ? 14 : 16,
                color: T.gold, letterSpacing:'.2em',
              }}>{byYear[activeYear].length}件の記録</span>
            </div>

            {byYear[activeYear].map(c => (
              <ConcertRecord key={c.id} c={c} isM={isM} T={T}/>
            ))}
          </div>
        </section>
      </>
    );
  };
})();