/* global React, FadeUp, SectionHead, SP_DATA */
const { useState } = React;

function Schedule() {
  const days = Object.keys(SP_DATA.SCHEDULE);
  const [day, setDay] = useState(days[0]);
  const matches = SP_DATA.SCHEDULE[day];

  const initials = (name) => name.replace(/\s+/g, "").slice(0, 3).toUpperCase();

  return (
    <FadeUp className="section" id="schedule">
      <SectionHead
        eyebrow="// 今日賽程"
        title="賽程與即時推薦"
        sub="AI 已標記每場賽事的最佳倉位"
        right={
          <div className="tabs">
            {days.map((d) => (
              <button key={d} className={`tab ${day === d ? "is-on" : ""}`} onClick={() => setDay(d)}>
                {d}<span className="count">{SP_DATA.SCHEDULE[d].length}</span>
              </button>
            ))}
          </div>
        }
      />

      <div className="day-divider"><span>{day}</span></div>
      <div className="schedule-grid">
        {matches.map((m, i) => (
          <div className="match-card" key={i}>
            <div className="hdr">
              <span>{m.lg} · {m.time}</span>
              {m.status === "live" ? <span className="live">直播中</span> : <span>即將開始</span>}
            </div>
            <div className="teams-row">
              <div className="team">
                <div className="crest">{initials(m.home)}</div>
                <div className="name">{m.home}</div>
              </div>
              <div className={`score ${m.status === "live" ? "" : "upcoming"}`}>
                {m.status === "live" ? `${m.hScore} : ${m.aScore}` : m.time}
              </div>
              <div className="team">
                <div className="crest">{initials(m.away)}</div>
                <div className="name">{m.away}</div>
              </div>
            </div>
            <div className="pick-row">
              <span className="label">AI 推薦 · {m.conf}% 信心</span>
              <span className="val">{m.pick}</span>
            </div>
          </div>
        ))}
      </div>
    </FadeUp>
  );
}

window.Schedule = Schedule;