/* Plan tab + Explanation + Zones + Race day + Settings */

window.Plan = function({ data, progress, updateProgress }) {
  const { weeks, days, notes } = data;
  const today = window.todayISO();
  const currentWeek = window.findCurrentWeek(weeks, days);
  const [filter, setFilter] = React.useState("all");
  const [openWeek, setOpenWeek] = React.useState(currentWeek);

  const filteredWeeks = filter === "all" ? weeks : weeks.filter(w => w.phase === filter);

  return (
    <div className="page">
      <h1 className="page-title">訓練計畫</h1>
      <div className="page-sub">21 週 · 每天打勾完成 · 輸入實跑距離自動累積</div>

      <div className="chips">
        <div className={"chip " + (filter === "all" ? "active" : "")} onClick={() => setFilter("all")}>全部 21 週</div>
        <div className={"chip " + (filter === "base" ? "active" : "")} onClick={() => setFilter("base")}>打底 W1–4</div>
        <div className={"chip " + (filter === "build" ? "active" : "")} onClick={() => setFilter("build")}>建量 W5–8</div>
        <div className={"chip " + (filter === "specific" ? "active" : "")} onClick={() => setFilter("specific")}>強化 W9–17</div>
        <div className={"chip " + (filter === "taper" ? "active" : "")} onClick={() => setFilter("taper")}>減量 W18–20</div>
        <div className={"chip " + (filter === "race" ? "active" : "")} onClick={() => setFilter("race")}>比賽週</div>
      </div>

      <div className="weeks-list">
        {filteredWeeks.map(w => (
          <WeekCard key={w.n} week={w} days={days.filter(d => d.week === w.n)}
                    note={notes[w.n]}
                    progress={progress} updateProgress={updateProgress}
                    isOpen={openWeek === w.n} isCurrent={currentWeek === w.n}
                    onToggle={() => setOpenWeek(openWeek === w.n ? null : w.n)} />
        ))}
      </div>
    </div>
  );
};

window.WeekCard = function({ week, days, note, progress, updateProgress, isOpen, isCurrent, onToggle }) {
  const stats = window.computeWeekStats(week, days, progress);
  const pct = stats.target > 0 ? Math.min(1, stats.actualKm / stats.target) : 0;
  const dayPct = stats.totalDays > 0 ? stats.completedDays / stats.totalDays : 0;
  const allDone = stats.completedDays === stats.totalDays;

  return (
    <div className={"week-card" + (isOpen ? " expanded" : "") + (isCurrent ? " current" : "")}>
      <div className="week-head" onClick={onToggle}>
        <div className="week-num">W{week.n}</div>
        <div>
          <div className="week-info-title">
            {week.title}
            {isCurrent && <span className="today-badge" style={{ marginLeft: 8 }}>本週</span>}
          </div>
          <div className="week-info-dates">{week.dates}</div>
        </div>
        <div className={"phase-pill " + week.phase}>{week.phaseLabel}</div>
        <div className="week-km">
          <div><span className="actual">{stats.actualKm.toFixed(1)}</span><span className="delim">/</span><span className="target">{stats.target}</span></div>
          <div className="target">km</div>
        </div>
        <window.RingProgress pct={dayPct} done={allDone} />
        <div className="caret">▾</div>
      </div>
      {isOpen && (
        <div className="week-body">
          <div className="week-meta">
            <span>目標 <b>{stats.target} km</b></span>
            <span>實跑 <b>{stats.actualKm.toFixed(1)} km</b></span>
            <span>完成 <b>{stats.completedDays}/{stats.totalDays}</b> 天</span>
            <span>進度 <b>{Math.round(pct * 100)}%</b></span>
          </div>
          <div className="day-list">
            {days.map(d => (
              <DayCard key={d.iso} day={d} progress={progress[d.iso] || {}} updateProgress={updateProgress} />
            ))}
          </div>
          {note && <div style={{ marginTop: 14, padding: "12px 14px", background: "var(--bg-elev)", border: "1px solid var(--line-soft)", borderRadius: 10, fontSize: 12.5, color: "var(--text-dim)" }}>💡 {note}</div>}
        </div>
      )}
    </div>
  );
};

window.DayCard = function({ day, progress, updateProgress }) {
  const meta = window.CAT_META[day.cat];
  const today = window.todayISO();
  const isToday = day.iso === today;
  const isPast = day.iso < today;
  const isRunCat = window.RUN_CATS.includes(day.cat);

  return (
    <div className={"day-card" + (progress.done ? " done" : "") + (isToday ? " today" : "") + (isPast ? " past" : "")}
         style={{ "--cat": meta.color }}>
      <button
        className={"check" + (progress.done ? " checked" : "")}
        onClick={() => updateProgress(day.iso, { done: !progress.done })}
        aria-label="完成">
      </button>
      <div className="dow-block">
        <div className="dow">{day.day === "mon" ? "週一" : day.day === "tue" ? "週二" : day.day === "wed" ? "週三" : day.day === "thu" ? "週四" : day.day === "fri" ? "週五" : day.day === "sat" ? "週六" : "週日"}</div>
        <div className="dow-date">{window.fmtMD(day.iso)}</div>
      </div>
      <div className="day-icon">{meta.icon}</div>
      <div className="day-content">
        <div className="day-title">
          <span className="day-title-text">{day.title}</span>
          <span className="cat-tag" style={{ "--cat": meta.color, color: meta.color }}>{meta.label}</span>
          {isToday && <span className="today-badge">今日</span>}
        </div>
        <div className="day-detail">{day.detail}</div>
      </div>
      {isRunCat ? (
        <div className="day-km-wrap">
          <input
            type="number" step="0.1" min="0" placeholder="0.0"
            className={"day-km-input" + (progress.km ? " has-value" : "")}
            value={progress.km || ""}
            onChange={e => updateProgress(day.iso, { km: e.target.value === "" ? null : parseFloat(e.target.value) })}
          />
          <span className="day-km-suffix">km</span>
        </div>
      ) : <div></div>}
      <div></div>
    </div>
  );
};

/* ---------- Explanation ---------- */
window.Explain = function() {
  return (
    <div className="page">
      <h1 className="page-title">訓練名詞解釋</h1>
      <div className="page-sub">用<b>不同強度</b>練不同系統。輕鬆 + 長跑練「能跑很久」，節奏練「能跑得快很久」，間歇練「最高能跑多快」。</div>
      <div className="exp-grid">
        {window.TRAINING_TYPES.map(t => (
          <div key={t.key} className="exp-card" style={{ "--cat": t.color }}>
            <div className="exp-card-head">
              <div className="exp-icon">{t.icon}</div>
              <div>
                <div className="exp-name">{t.name}</div>
                <div style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 600 }}>{t.en}</div>
              </div>
            </div>
            <div className="exp-tagline">{t.tagline}</div>
            {t.rows.map(([k, v], i) => (
              <div key={i} className="exp-row">
                <div className="key">{k}</div>
                <div className="val" dangerouslySetInnerHTML={{ __html: v }}></div>
              </div>
            ))}
            <div className="exp-warn">⚠️ {t.warn}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- Zones ---------- */
window.Zones = function() {
  return (
    <div className="page">
      <h1 className="page-title">配速與心率區間</h1>
      <div className="page-sub">針對 sub-2:00（5:40/km） · 最大心率約 196 bpm · 靜止 63 bpm</div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="zone-table">
          <thead>
            <tr>
              <th>區間</th>
              <th>配速</th>
              <th>心率</th>
              <th>感受</th>
              <th>用途</th>
            </tr>
          </thead>
          <tbody>
            {window.ZONES.map(z => (
              <tr key={z.name}>
                <td><span className="zone-name"><span className="zone-dot" style={{ background: z.color }}></span>{z.name}</span></td>
                <td className="pace">{z.pace}</td>
                <td className="hr">{z.hr}</td>
                <td>{z.feel}</td>
                <td>{z.use}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 14 }}>一週模板</h2>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="zone-table">
          <thead><tr><th>星期</th><th>內容</th><th>備註</th></tr></thead>
          <tbody>
            {window.WEEKLY_TEMPLATE.map(([d, i, t, n]) => (
              <tr key={d}><td><b>{d}</b></td><td>{i} {t}</td><td>{n}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* ---------- Race Day ---------- */
window.RaceDay = function() {
  const today = window.todayISO();
  const days = window.daysBetween(today, window.RACE_ISO);
  return (
    <div className="page">
      <h1 className="page-title">比賽日策略</h1>
      <div className="page-sub">9/20 (日) · 21.1 km · 目標 1:59:30 · 距比賽 {Math.max(0, days)} 天</div>

      <div className="card" style={{ padding: 28 }}>
        <h3 className="card-title">配速計畫</h3>
        <div className="race-timeline">
          {window.RACE_STEPS.map((s, i) => (
            <div key={i} className={"race-step" + (s.finish ? " finish" : "")}>
              <div className="km">
                {s.km}
                <span className="pace">@ {s.pace}</span>
              </div>
              <div>
                <div className="what">{s.what}</div>
                <div className="why">{s.why}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 14 }}>關鍵原則</h2>
      <div className="card">
        {window.PRINCIPLES.map((p, i) => (
          <div key={i} className="principle">
            <div className="principle-num">0{i + 1}</div>
            <div className="principle-text" dangerouslySetInnerHTML={{ __html: p }}></div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- Settings ---------- */
window.Settings = function({ resetAll, progress, data, syncStatus, syncNow }) {
  const [endpoint, setEndpoint] = React.useState(() => localStorage.getItem(window.SYNC_ENDPOINT_KEY) || "");
  const [token, setToken] = React.useState(() => localStorage.getItem(window.SYNC_TOKEN_KEY) || "");
  const saveSync = () => {
    localStorage.setItem(window.SYNC_ENDPOINT_KEY, endpoint.trim());
    localStorage.setItem(window.SYNC_TOKEN_KEY, token.trim());
    location.reload();
  };
  const clearSync = () => {
    if (!confirm("確定要關閉雲端同步？本機資料會保留。")) return;
    localStorage.removeItem(window.SYNC_ENDPOINT_KEY);
    localStorage.removeItem(window.SYNC_TOKEN_KEY);
    location.reload();
  };
  const pullNow = async () => {
    if (!confirm("從雲端拉取會覆蓋本機資料，確定？")) return;
    const r = await syncNow();
    if (!r.ok) alert("同步失敗：" + r.error);
  };
  const statusLabel = {
    idle: "待機", off: "未啟用", pulling: "讀取中…",
    pushing: "上傳中…", ok: "已同步", error: "錯誤"
  }[syncStatus] || syncStatus;
  const statusColor = {
    ok: "var(--accent)", error: "var(--danger)", off: "var(--text-mute)"
  }[syncStatus] || "var(--text-dim)";

  const exportData = () => {
    const blob = new Blob([JSON.stringify(progress, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = "rrr-progress-" + window.todayISO() + ".json";
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(url);
  };
  const importData = () => {
    const input = document.createElement("input");
    input.type = "file"; input.accept = ".json";
    input.onchange = e => {
      const f = e.target.files[0];
      if (!f) return;
      const r = new FileReader();
      r.onload = () => {
        try {
          const obj = JSON.parse(r.result);
          localStorage.setItem(window.STORAGE_KEY, JSON.stringify(obj));
          alert("匯入成功，重新整理頁面即可看到");
          location.reload();
        } catch (e) { alert("匯入失敗：" + e.message); }
      };
      r.readAsText(f);
    };
    input.click();
  };

  const totalKm = Object.values(progress).reduce((s, p) => s + (Number(p.km) || 0), 0);
  const totalDone = Object.values(progress).filter(p => p.done).length;

  return (
    <div className="page">
      <h1 className="page-title">設定</h1>
      <div className="page-sub">資料匯入匯出 · 進度管理</div>

      <div className="card">
        <h3 className="card-title">目前資料</h3>
        <div className="settings-row">
          <div>
            <div className="settings-label">已完成訓練</div>
            <div className="settings-desc">所有打勾完成的天數</div>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700 }}>{totalDone} 天</div>
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label">累計實跑距離</div>
            <div className="settings-desc">所有手動輸入的 km 總和</div>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>{totalKm.toFixed(1)} km</div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 18 }}>
        <h3 className="card-title">資料管理</h3>
        <div className="settings-row">
          <div>
            <div className="settings-label">匯出進度</div>
            <div className="settings-desc">下載 JSON 備份檔，可在其他裝置匯入</div>
          </div>
          <button className="btn" onClick={exportData}>匯出 JSON</button>
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label">匯入進度</div>
            <div className="settings-desc">從備份的 JSON 還原進度（會覆蓋目前資料）</div>
          </div>
          <button className="btn" onClick={importData}>匯入 JSON</button>
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label" style={{ color: "var(--danger)" }}>清除所有進度</div>
            <div className="settings-desc">刪除所有打勾紀錄與輸入的 km，無法復原</div>
          </div>
          <button className="btn danger" onClick={() => {
            if (confirm("確定要清除所有打勾紀錄與 km？此動作無法復原。")) resetAll();
          }}>清除全部</button>
        </div>
      </div>

      <div className="card" style={{ marginTop: 18 }}>
        <h3 className="card-title">雲端同步 <span style={{ marginLeft: 8, fontSize: 12, color: statusColor, fontWeight: 500 }}>● {statusLabel}</span></h3>
        <div className="settings-row" style={{ flexDirection: "column", alignItems: "stretch", gap: 8 }}>
          <div>
            <div className="settings-label">Worker Endpoint</div>
            <div className="settings-desc">例如 https://run-sync.your-name.workers.dev</div>
          </div>
          <input
            type="text"
            value={endpoint}
            onChange={e => setEndpoint(e.target.value)}
            placeholder="https://run-sync.xxx.workers.dev"
            style={{ width: "100%", padding: "8px 10px", border: "1px solid var(--border)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 13, background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div className="settings-row" style={{ flexDirection: "column", alignItems: "stretch", gap: 8 }}>
          <div>
            <div className="settings-label">Sync Token</div>
            <div className="settings-desc">在 Worker 設定的 SYNC_TOKEN，用來驗證身份</div>
          </div>
          <input
            type="password"
            value={token}
            onChange={e => setToken(e.target.value)}
            placeholder="貼上你的 token"
            style={{ width: "100%", padding: "8px 10px", border: "1px solid var(--border)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 13, background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label">儲存設定</div>
            <div className="settings-desc">儲存後會重新整理頁面並自動同步</div>
          </div>
          <button className="btn" onClick={saveSync}>儲存</button>
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label">從雲端拉取</div>
            <div className="settings-desc">用雲端資料覆蓋本機（換新裝置時用）</div>
          </div>
          <button className="btn" onClick={pullNow} disabled={syncStatus === "off"}>立即拉取</button>
        </div>
        <div className="settings-row">
          <div>
            <div className="settings-label" style={{ color: "var(--danger)" }}>關閉同步</div>
            <div className="settings-desc">清除本機儲存的 token，停止同步</div>
          </div>
          <button className="btn danger" onClick={clearSync} disabled={syncStatus === "off"}>關閉</button>
        </div>
      </div>

      <div className="card" style={{ marginTop: 18 }}>
        <h3 className="card-title">關於</h3>
        <div style={{ color: "var(--text-dim)", fontSize: 13.5, lineHeight: 1.7 }}>
          <p style={{ marginTop: 0 }}>Run Run Run · 個人半馬訓練追蹤系統</p>
          <p>目標：2026/9/20 · 21.1 km · sub-2:00</p>
          <p style={{ color: "var(--text-mute)" }}>進度儲存在瀏覽器 localStorage；如有設定 Worker，會在背景同步至 Cloudflare。</p>
        </div>
      </div>
    </div>
  );
};