/* ============================================================
   IRONLOG — Calendar / training log (interactive centerpiece)
   ============================================================ */

const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DOW = ["S","M","T","W","T","F","S"];

function keyOf(y, m, d) { const p = (n) => (n < 10 ? "0"+n : ""+n); return `${y}-${p(m+1)}-${p(d)}`; }

function Calendar({ log, admin, onSaveLog, today = new Date(2026, 5, 1) }) {
  const [cursor, setCursor] = useState({ y: 2026, m: 4 }); // start on May (most data)
  const [view, setView] = useState("month"); // 'month' | 'week'
  const [selected, setSelected] = useState("2026-05-28"); // PR day pre-selected
  const [weekStart, setWeekStart] = useState(24); // day-of-month for week view
  const [editDay, setEditDay] = useState(null);

  const { y, m } = cursor;
  const firstDow = new Date(y, m, 1).getDay();
  const daysInMonth = new Date(y, m + 1, 0).getDate();

  /* month summary — scoped to the displayed month, recomputed on nav */
  const summary = (() => {
    let gym = 0, rest = 0, vol = 0;
    for (let d = 1; d <= daysInMonth; d++) {
      const e = log[keyOf(y, m, d)];
      if (!e) continue;
      if (e.status === "gym") { gym++; vol += e.totalVolume || 0; } else rest++;
    }
    return { gym, rest, vol };
  })();

  /* Best streak THIS MONTH: longest run of gym days, where a single planned
     rest day does not break the streak but two-in-a-row (or a gap) does. */
  const streak = (() => {
    let run = 0, best = 0, gaps = 0, seen = false;
    for (let d = 1; d <= daysInMonth; d++) {
      const e = log[keyOf(y, m, d)];
      if (e && e.status === "gym") { run++; gaps = 0; seen = true; best = Math.max(best, run); }
      else if (e && e.status === "rest") { gaps++; if (gaps > 1) run = 0; }
      else { run = 0; gaps = 0; } // untracked day breaks it
    }
    return seen ? best : 0;
  })();

  function navMonth(dir) {
    let nm = m + dir, ny = y;
    if (nm < 0) { nm = 11; ny--; } else if (nm > 11) { nm = 0; ny++; }
    setCursor({ y: ny, m: nm });
  }

  const selEntry = selected ? log[selected] : null;

  /* build the day cells */
  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const weekDays = (() => {
    // week view: 7 days starting at weekStart within current month
    const arr = [];
    for (let i = 0; i < 7; i++) { const d = weekStart + i; if (d >= 1 && d <= daysInMonth) arr.push(d); }
    return arr;
  })();

  function DayCell({ d }) {
    if (!d) return <div className="cal-cell cal-empty" aria-hidden="true" />;
    const k = keyOf(y, m, d);
    const e = log[k];
    const isToday = today.getFullYear() === y && today.getMonth() === m && today.getDate() === d;
    const isSel = selected === k;
    const status = e ? e.status : "none";
    return (
      <button
        className={"cal-cell cal-day status-" + status + (isSel ? " is-sel" : "") + (isToday ? " is-today" : "")}
        onClick={() => e ? setSelected(isSel ? null : k) : (admin ? setEditDay(k) : null)}
        aria-label={`${MONTHS[m]} ${d}${e ? ", " + (e.status === "gym" ? e.title : "rest day") : ", no log"}`}
        aria-pressed={isSel}
      >
        <span className="cal-date tnum">{d}</span>
        {e && <span className="cal-pip" />}
        {e && e.status === "gym" && <span className="cal-vol dim tnum">{Math.round(e.totalVolume/1000)}k</span>}
        {isToday && <span className="cal-today-tag">TODAY</span>}
        {admin && e && <span className="cal-edit-hint"><Icons.Pen size={11}/></span>}
      </button>
    );
  }

  return (
    <section id="calendar" className="section">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-index">05 — THE LOG</div>
            <h2 className="section-title">Training<br/>Calendar</h2>
          </div>
          <div className="cal-stats">
            <div className="cal-stat">
              <span className="cal-stat-num display tnum"><Icons.Flame size={22} style={{ color:"var(--ox-bright)" }}/> {streak}</span>
              <span className="cal-stat-lbl eyebrow">Best streak</span>
            </div>
            <div className="cal-stat">
              <span className="cal-stat-num display tnum" style={{ color:"var(--gym-bright)" }}>{summary.gym}</span>
              <span className="cal-stat-lbl eyebrow">Gym days</span>
            </div>
            <div className="cal-stat">
              <span className="cal-stat-num display tnum" style={{ color:"var(--rest-bright)" }}>{summary.rest}</span>
              <span className="cal-stat-lbl eyebrow">Rest days</span>
            </div>
            <div className="cal-stat">
              <span className="cal-stat-num display tnum">{(summary.vol/1000).toFixed(0)}k</span>
              <span className="cal-stat-lbl eyebrow">kg moved</span>
            </div>
          </div>
        </Reveal>

        <Reveal className="card cal-card">
          {/* toolbar */}
          <div className="cal-toolbar">
            <div className="cal-nav">
              <button className="pen" onClick={() => navMonth(-1)} aria-label="Previous month"><Icons.ChevL /></button>
              <div className="cal-month head">
                <span className="cal-month-name">{MONTHS[m]}</span>
                <span className="cal-month-year tnum dim">{y}</span>
              </div>
              <button className="pen" onClick={() => navMonth(1)} aria-label="Next month"><Icons.Chevron /></button>
            </div>
            <div className="cal-right">
              <div className="cal-legend">
                <span className="lg lg-gym">Gym</span>
                <span className="lg lg-rest">Rest</span>
                <span className="lg lg-none">Untracked</span>
              </div>
              <div className="cal-toggle">
                {["month","week"].map(v => (
                  <button key={v} className={"cal-toggle-btn" + (view === v ? " on" : "")} onClick={() => setView(v)}>{v}</button>
                ))}
              </div>
            </div>
          </div>

          {/* grid */}
          <div className="cal-dow">{DOW.map((d,i) => <span key={i}>{d}</span>)}</div>
          {view === "month" ? (
            <div className="cal-grid">{cells.map((d, i) => <DayCell key={i} d={d} />)}</div>
          ) : (
            <div className="cal-week">
              <div className="cal-week-nav">
                <button className="btn btn-ghost" onClick={() => setWeekStart(Math.max(1, weekStart - 7))}><Icons.ChevL size={14}/> Prev week</button>
                <span className="muted tnum">{MONTHS[m]} {weekStart}–{Math.min(daysInMonth, weekStart+6)}</span>
                <button className="btn btn-ghost" onClick={() => setWeekStart(Math.min(daysInMonth, weekStart + 7))}>Next week <Icons.Chevron size={14}/></button>
              </div>
              <div className="cal-grid cal-grid-week">{weekDays.map((d) => <DayCell key={d} d={d} />)}</div>
            </div>
          )}
        </Reveal>

        {/* detail panel */}
        <DayDetail entry={selEntry} dayKey={selected} admin={admin} onEdit={() => setEditDay(selected)} />
      </div>

      {editDay && (
        <LogEditor dayKey={editDay} entry={log[editDay]} onClose={() => setEditDay(null)}
          onSave={(e) => { onSaveLog(editDay, e); setEditDay(null); setSelected(editDay); }} />
      )}
    </section>
  );
}

/* ---------- Day detail (reveals below calendar) ---------- */
function DayDetail({ entry, dayKey, admin, onEdit }) {
  if (!dayKey) {
    return (
      <div className="cal-detail cal-detail-empty reveal in">
        <Icons.Calendar size={26} />
        <p className="muted">Select a day to read its session.</p>
      </div>
    );
  }
  const [y, m, d] = dayKey.split("-").map(Number);
  const dateStr = `${MONTHS[m-1]} ${d}, ${y}`;
  if (!entry) {
    return (
      <div className="cal-detail cal-detail-empty reveal in" key={dayKey}>
        <p className="muted">No log for <strong style={{color:"var(--chalk)"}}>{dateStr}</strong>.</p>
        {admin && <button className="btn btn-primary" onClick={onEdit}><Icons.Plus size={15}/> Log this day</button>}
      </div>
    );
  }
  const isGym = entry.status === "gym";
  return (
    <div className="cal-detail reveal in" key={dayKey}>
      <div className="cal-detail-head">
        <div>
          <span className={"tag " + (isGym ? "tag-gym" : "tag-rest")}>{isGym ? "Gym Day" : "Rest Day"}</span>
          <h3 className="display cal-detail-title">{entry.title}</h3>
          <span className="muted tnum cal-detail-date">{dateStr}</span>
        </div>
        <div className="cal-detail-meta">
          {isGym && <>
            <div className="cdm">
              <span className="cdm-num display tnum">{entry.exercises.length}</span>
              <span className="cdm-lbl eyebrow">Lifts</span>
            </div>
            <div className="cdm">
              <span className="cdm-num display tnum">{entry.durationMin}'</span>
              <span className="cdm-lbl eyebrow">Time</span>
            </div>
            <div className="cdm">
              <span className="cdm-num display tnum">{entry.totalVolume.toLocaleString()}</span>
              <span className="cdm-lbl eyebrow">kg volume</span>
            </div>
          </>}
          {admin && <button className="pen" onClick={onEdit} aria-label="Edit log"><Icons.Pen /></button>}
        </div>
      </div>

      {isGym ? (
        <ul className="cal-ex-list">
          {entry.exercises.map((ex, i) => (
            <li key={i} className="cal-ex" style={{ animationDelay: (i*55)+"ms" }}>
              <span className="cal-ex-idx tnum dim">{(i+1).toString().padStart(2,"0")}</span>
              <span className="cal-ex-name head">{ex.name}</span>
              <span className="cal-ex-scheme tnum">
                <b>{ex.sets}</b><span className="x">×</span><b>{ex.reps}</b>
                <span className="at">@</span><b>{ex.weight}{ex.unit}</b>
              </span>
              <span className="cal-ex-vol dim tnum">{ex.volume.toLocaleString()} kg</span>
            </li>
          ))}
        </ul>
      ) : (
        <div className="cal-rest-block">
          <Icons.Dot size={14} style={{ color: "var(--rest-bright)" }} />
          <p className="muted" style={{ margin: 0 }}>Programmed recovery. The body grows between sessions, not during them.</p>
        </div>
      )}

      {entry.note && (
        <div className="cal-note">
          <span className="eyebrow">Note</span>
          <p>{entry.note}</p>
        </div>
      )}
    </div>
  );
}

/* ---------- Log editor (admin) ---------- */
function LogEditor({ dayKey, entry, onClose, onSave }) {
  const [y, m, d] = dayKey.split("-").map(Number);
  const [status, setStatus] = useState(entry ? entry.status : "gym");
  const [title, setTitle] = useState(entry ? entry.title : "");
  const [note, setNote] = useState(entry ? entry.note : "");
  const [rows, setRows] = useState(
    entry && entry.exercises.length
      ? entry.exercises.map(e => ({ ...e }))
      : [{ name: "", sets: 3, reps: 10, weight: 40, unit: "kg" }]
  );
  const setRow = (i, patch) => setRows(rows.map((r, idx) => idx === i ? { ...r, ...patch } : r));
  const addRow = () => setRows([...rows, { name: "", sets: 3, reps: 10, weight: 40, unit: "kg" }]);
  const delRow = (i) => setRows(rows.filter((_, idx) => idx !== i));

  function save() {
    if (status === "rest") {
      onSave({ status: "rest", title: title || "Rest & Recover", date: `${m}/${d}/${y}`, exercises: [], totalVolume: 0, note });
      return;
    }
    const exercises = rows.filter(r => r.name).map(r => ({
      name: r.name, sets: +r.sets, reps: +r.reps, weight: +r.weight, unit: r.unit,
      volume: Math.round((+r.sets) * (+r.reps) * (+r.weight)),
    }));
    const totalVolume = exercises.reduce((a, e) => a + e.volume, 0);
    onSave({ status: "gym", title: title || "Training Session", date: `${m}/${d}/${y}`, exercises, totalVolume, durationMin: entry?.durationMin || 75, note });
  }

  return (
    <Modal title={(entry ? "Edit log · " : "New log · ") + `${MONTHS[m-1]} ${d}`} onClose={onClose} maxWidth={620}
      footer={<>
        <button className="btn" onClick={onClose}>Cancel</button>
        <button className="btn btn-primary" onClick={save}><Icons.Check size={15}/> Save log</button>
      </>}>
      <div className="field">
        <label>Day type</label>
        <div className="cal-toggle" style={{ display: "inline-flex" }}>
          {["gym","rest"].map(s => (
            <button key={s} className={"cal-toggle-btn" + (status === s ? " on" : "")} onClick={() => setStatus(s)}>{s}</button>
          ))}
        </div>
      </div>
      <div className="field"><label>Session title</label>
        <input className="input" value={title} onChange={(e)=>setTitle(e.target.value)} placeholder={status === "gym" ? "Push · Bench Focus" : "Rest & Recover"} /></div>

      {status === "gym" && (
        <div className="field">
          <label>Exercises — sets × reps × weight</label>
          <div className="logex-list">
            {rows.map((r, i) => (
              <div key={i} className="logex-row">
                <input className="input logex-name" value={r.name} onChange={(e)=>setRow(i,{name:e.target.value})} placeholder="Exercise" />
                <input className="input tnum logex-n" type="number" value={r.sets} onChange={(e)=>setRow(i,{sets:e.target.value})} aria-label="sets" />
                <span className="logex-x">×</span>
                <input className="input tnum logex-n" type="number" value={r.reps} onChange={(e)=>setRow(i,{reps:e.target.value})} aria-label="reps" />
                <span className="logex-x">@</span>
                <input className="input tnum logex-w" type="number" value={r.weight} onChange={(e)=>setRow(i,{weight:e.target.value})} aria-label="weight" />
                <select className="select logex-u" value={r.unit} onChange={(e)=>setRow(i,{unit:e.target.value})}><option>kg</option><option>lbs</option></select>
                <button className="pen pen-sm" onClick={() => delRow(i)} aria-label="Remove exercise"><Icons.Trash /></button>
              </div>
            ))}
          </div>
          <button className="btn" style={{ marginTop: 12 }} onClick={addRow}><Icons.Plus size={15}/> Add exercise</button>
        </div>
      )}

      <div className="field" style={{ marginBottom: 0 }}><label>Note</label>
        <textarea className="textarea" value={note} onChange={(e)=>setNote(e.target.value)} placeholder="How did it feel?" /></div>
    </Modal>
  );
}

Object.assign(window, { Calendar });