// page-schedule.jsx — 練習・行事予定

(function() {
  function fmtDate(iso) {
    const d = new Date(iso + 'T00:00:00');
    const wk = ['日','月','火','水','木','金','土'][d.getDay()];
    return {
      y: d.getFullYear(),
      m: d.getMonth() + 1,
      d: d.getDate(),
      wk,
    };
  }

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

    // Group schedule by year-month
    const byMonth = {};
    window.A_DATA_SCHEDULE.forEach(e => {
      const dt = fmtDate(e.date);
      const key = `${dt.y}-${String(dt.m).padStart(2,'0')}`;
      if (!byMonth[key]) byMonth[key] = { y: dt.y, m: dt.m, items: [] };
      byMonth[key].items.push({ ...e, dt });
    });
    const months = Object.values(byMonth).sort((a,b) => a.y*100+a.m - (b.y*100+b.m));

    return (
      <>
        <window.APageTitle en="SCHEDULE" jp="練習・行事予定" mobile={isM}/>

        {/* Upcoming concerts callout */}
        <section style={{
          padding: isM ? '40px 24px' : '60px 60px',
          background: T.bgAlt,
          borderBottom:`1px solid ${T.rule}`,
        }}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14, marginBottom:24,
            }}>
              <h2 style={{
                fontFamily: T.fontSerif, fontWeight:500,
                fontSize: isM ? 22 : 26, margin:0, color: T.wine,
                letterSpacing:'.1em',
              }}>今後の演奏会出演予定</h2>
              <span style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize:13, letterSpacing:'.25em', color: T.gold,
              }}>UPCOMING</span>
            </div>
            <div style={{
              display:'grid',
              gridTemplateColumns: isM ? '1fr' : 'repeat(3, 1fr)',
              gap: isM ? 14 : 18,
            }}>
              {window.A_DATA_UPCOMING.map((e, i) => (
                <div key={i} style={{
                  background: T.bg, padding: isM ? 20 : 24,
                  border:`1px solid ${T.rule}`,
                  position:'relative',
                }}>
                  <div style={{
                    position:'absolute', top:0, left:0, right:0, height:3,
                    background: `linear-gradient(90deg, ${T.wine}, ${T.gold})`,
                  }}/>
                  <h3 style={{
                    fontFamily: T.fontSerif, fontWeight:500,
                    fontSize: isM ? 16 : 17, margin:'10px 0 12px',
                    color: T.wine, lineHeight:1.5,
                  }}>{e.title}</h3>
                  <div style={{
                    fontFamily: T.fontSerif, fontSize: isM ? 13 : 14,
                    color: T.ink, lineHeight:1.8,
                  }}>
                    <div>📅 {e.date}</div>
                    <div>📍 {e.venue}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Practice schedule table */}
        <section style={{padding: isM ? '50px 24px' : '80px 60px'}}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14, marginBottom:32,
            }}>
              <h2 style={{
                fontFamily: T.fontSerif, fontWeight:500,
                fontSize: isM ? 22 : 28, margin:0, color: T.wine,
                letterSpacing:'.1em',
              }}>練習・行事予定表</h2>
              <span style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize:13, letterSpacing:'.25em', color: T.gold,
              }}>LESSON & STAGE</span>
            </div>

            <p style={{
              fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
              color: T.inkSoft, lineHeight:1.9,
              margin:'0 0 32px',
            }}>通常の練習は第２・第４・第５水曜日の午後（13:00～15:30）に行っています。<br/>
            ★印は演奏会・出演行事です。</p>

            {months.map(month => (
              <div key={`${month.y}-${month.m}`} style={{marginBottom: isM ? 32 : 40}}>
                {/* Month header */}
                <div style={{
                  display:'flex', alignItems:'baseline', gap:14,
                  paddingBottom:10, marginBottom: isM ? 12 : 16,
                  borderBottom:`2px solid ${T.wine}`,
                }}>
                  <span style={{
                    fontFamily: T.fontSerifEn, fontStyle:'italic',
                    fontSize: isM ? 22 : 28, color: T.wine,
                  }}>{String(month.m).padStart(2,'0')}</span>
                  <span style={{
                    fontFamily: T.fontSerif, fontSize: isM ? 15 : 18,
                    color: T.ink, letterSpacing:'.1em',
                  }}>{month.y}年 {month.m}月</span>
                </div>

                {/* Rows */}
                <div>
                  {month.items.map((e, i) => (
                    <div key={i} style={{
                      display:'grid',
                      gridTemplateColumns: isM ? '88px 1fr' : '110px 110px 1fr 1fr',
                      gap: isM ? 12 : 16,
                      padding: isM ? '14px 12px' : '16px 16px',
                      borderBottom: e.highlight ? 'none' : `1px dashed ${T.rule}`,
                      marginBottom: e.highlight ? 6 : 0,
                      alignItems: isM ? 'flex-start' : 'baseline',
                      background: e.highlight ? `rgba(122,34,48,.08)` : 'transparent',
                      borderLeft: e.highlight ? `4px solid ${T.wine}` : '4px solid transparent',
                    }}>
                      <div style={{
                        fontFamily: T.fontSerif,
                        fontSize: isM ? 14 : 16,
                        fontWeight: e.highlight ? 700 : 500,
                        color: T.wine,
                        whiteSpace:'nowrap',
                      }}>
                        {e.highlight && <span style={{color: T.wine, marginRight:3}}>★</span>}
                        {e.dt.m}/{e.dt.d}
                        <span style={{
                          fontSize: isM ? 11 : 13,
                          color: T.inkSoft, marginLeft:6,
                          border:`1px solid ${T.rule}`, padding:'1px 5px',
                          fontWeight:500,
                        }}>{e.dt.wk}</span>
                      </div>
                      {!isM && (
                        <div style={{
                          fontFamily: T.fontSerif, fontSize: 14,
                          color: T.inkSoft,
                        }}>{e.time}</div>
                      )}
                      <div style={{
                        fontFamily: T.fontSerif, fontSize: isM ? 13 : 14,
                        color: T.inkSoft, lineHeight:1.6,
                        gridColumn: isM ? '1 / -1' : 'auto',
                      }}>
                        {isM && <span style={{color: T.gold, marginRight:6}}>{e.time}　</span>}
                        📍 {e.venue}
                      </div>
                      <div style={{
                        fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
                        color: e.highlight ? T.wine : T.ink,
                        lineHeight:1.6,
                        gridColumn: isM ? '1 / -1' : 'auto',
                        fontWeight: e.highlight ? 700 : 500,
                      }}>{e.content}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>
      </>
    );
  };
})();