/* ============================================================
   PROGRESS PORTFOLIO v2 — Calendar + day detail
   ============================================================ */
function Calendar({ me, updateMe, today, onSetDate, onGotoChecklist }) {
  const P = window.PP;
  const [cursor, setCursor] = useState(P.parseISO(today));
  const [selected, setSelected] = useState(today);
  const [eventOpen, setEventOpen] = useState(false);
  const [editingEvent, setEditingEvent] = useState(null);

  const year = cursor.getFullYear(), month = cursor.getMonth();
  const startPad = (new Date(year, month, 1).getDay() + 6) % 7;
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startPad; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(`${year}-${P.pad(month + 1)}-${P.pad(d)}`);
  const eventsOn = (iso) => me.events.filter((e) => iso >= e.start && iso <= e.end);
  const rec = me.days[selected];

  return (
    <div className="cal-wrap">
      <div className="cal-main">
        <div className="cal-toolbar">
          <div className="cal-month">{P.MONTHS[month]} <span className="mono dim">{year}</span></div>
          <div className="cal-nav">
            <button className="icon-btn" onClick={() => setCursor(new Date(year, month - 1, 1))}>‹</button>
            <button className="btn btn-sm" onClick={() => { setCursor(P.parseISO(today)); setSelected(today); }}>Today</button>
            <button className="icon-btn" onClick={() => setCursor(new Date(year, month + 1, 1))}>›</button>
            <button className="btn btn-sm btn-accent" onClick={() => setEventOpen(true)}>+ Event</button>
          </div>
        </div>
        <div className="cal-grid cal-dow">{P.WEEKDAY_NAMES.map((d) => <div key={d} className="cal-dow-cell">{d}</div>)}</div>
        <div className="cal-grid">
          {cells.map((iso, i) => {
            if (!iso) return <div key={i} className="cal-cell empty-cell" />;
            const r = me.days[iso];
            const pct = r ? P.dayCompletion(r) : null;
            const evs = eventsOn(iso);
            const isFut = iso > today;
            const preset = me.presets[r ? r.presetId : P.presetForDate(iso)];
            return (
              <button key={i} className={"cal-cell" + (iso === today ? " is-today" : "") + (iso === selected ? " is-sel" : "") + (isFut ? " is-future" : "")} onClick={() => setSelected(iso)}>
                <div className="cal-num">{P.parseISO(iso).getDate()}</div>
                {pct != null && <div className="cal-ring-mini"><Ring pct={pct} size={30} stroke={3.5}><span className="cal-mini-pct">{r.completed ? "✓" : Math.round(pct * 100)}</span></Ring></div>}
                {pct == null && !isFut && <div className="cal-dot-empty" />}
                {preset && <div className="cal-preset">{preset.tag.split(" · ")[0]}</div>}
                {evs.map((e) => <div key={e.id} className={"cal-event " + e.type}>{e.title}</div>)}
                {r && r.photos && r.photos.length > 0 && <div className="cal-photo-dot">▣</div>}
              </button>
            );
          })}
        </div>
        <div className="cal-legend">
          <span><span className="lg ico-today" /> Today</span><span><span className="lg ico-done" /> Completed</span>
          <span><span className="lg ico-vac" /> Vacation</span><span><span className="lg ico-ev" /> Event</span>
        </div>
      </div>

      <DayDetail iso={selected} record={rec} me={me} updateMe={updateMe} today={today} events={eventsOn(selected)} onSetDate={onSetDate} onGotoChecklist={onGotoChecklist} onEditEvent={(ev) => setEditingEvent(ev)} />

      {eventOpen && <EventModal onClose={() => setEventOpen(false)} onAdd={(ev) => updateMe((m) => m.events.push(ev))} defaultStart={selected} />}
      {editingEvent && <EventModal existing={editingEvent} onClose={() => setEditingEvent(null)} onAdd={(ev) => updateMe((m) => { const i = m.events.findIndex((e) => e.id === ev.id); if (i >= 0) m.events[i] = ev; })} onDelete={(id) => { updateMe((m) => { m.events = m.events.filter((e) => e.id !== id); }); setEditingEvent(null); }} defaultStart={selected} />}
    </div>
  );
}

function EventModal({ onClose, onAdd, onDelete, defaultStart, existing }) {
  const isEdit = !!existing;
  const [title, setTitle] = useState(existing ? existing.title : "");
  const [type, setType] = useState(existing ? existing.type : "vacation");
  const [start, setStart] = useState(existing ? existing.start : defaultStart);
  const [end, setEnd] = useState(existing ? existing.end : defaultStart);
  const id = existing ? existing.id : "ev" + Date.now();
  return (
    <Modal open onClose={onClose} title={isEdit ? "Edit event" : "Schedule event"}
      footer={
        <div style={{ display: "flex", gap: 8, justifyContent: "space-between", width: "100%" }}>
          {isEdit && onDelete && <button className="btn btn-danger" onClick={() => onDelete(existing.id)}>Delete</button>}
          <button className="btn btn-accent" style={{ marginLeft: "auto" }} disabled={!title.trim()} onClick={() => { onAdd({ id, title, type, start, end: end < start ? start : end }); onClose(); }}>{isEdit ? "Save changes" : "Add to calendar"}</button>
        </div>
      }>
      <div className="stack">
        <Field label="Title"><input className="inp" value={title} autoFocus placeholder="e.g. Lake trip" onChange={(e) => setTitle(e.target.value)} /></Field>
        <Field label="Type"><Seg options={[{ value: "vacation", label: "Vacation" }, { value: "event", label: "Event" }, { value: "milestone", label: "Milestone" }]} value={type} onChange={setType} /></Field>
        <div className="row2">
          <Field label="Start"><input className="inp" type="date" value={start} onChange={(e) => setStart(e.target.value)} /></Field>
          <Field label="End"><input className="inp" type="date" value={end} onChange={(e) => setEnd(e.target.value)} /></Field>
        </div>
      </div>
    </Modal>
  );
}

function DayDetail({ iso, record, me, updateMe, today, events, onSetDate, onGotoChecklist, onEditEvent }) {
  const P = window.PP;
  const fileRef = useRef(null);
  const [note, setNote] = useState(record ? record.dayNote : "");
  useEffect(() => { setNote(record ? record.dayNote : ""); }, [iso, record]);

  function ensure(m) { if (!m.days[iso]) m.days[iso] = P.newDayRecord(iso, P.presetForDate(iso), m.presets); return m.days[iso]; }

  function handleFiles(files) {
    Array.from(files).forEach((file) => {
      const reader = new FileReader();
      reader.onload = (ev) => {
        const img = new Image();
        img.onload = () => {
          const max = 1100; let { width, height } = img;
          if (width > max || height > max) { const s = max / Math.max(width, height); width *= s; height *= s; }
          const c = document.createElement("canvas"); c.width = width; c.height = height; c.getContext("2d").drawImage(img, 0, 0, width, height);
          updateMe((m) => { const r = ensure(m); r.photos.push({ id: "ph" + Date.now() + Math.random().toString(36).slice(2, 5), data: c.toDataURL("image/jpeg", 0.8), caption: "" }); });
        };
        img.src = ev.target.result;
      };
      reader.readAsDataURL(file);
    });
  }

  const contribs = record ? P.dayContribs(record) : null;
  const pct = record ? P.dayCompletion(record) : 0;
  const isFuture = iso > today;
  const editable = iso >= P.addDays(today, -2);
  const skillLogs = record ? record.items.filter((it) => record.logs[it.iid] && record.logs[it.iid].skill).map((it) => ({ ...record.logs[it.iid].skill, min: record.logs[it.iid].values && record.logs[it.iid].values.min })) : [];
  const workouts = record ? record.items.filter((it) => record.logs[it.iid] && record.logs[it.iid].quality).map((it) => ({ name: P.taskById(it.taskId).name, q: record.logs[it.iid].quality })) : [];

  return (
    <div className="day-detail">
      <div className="dd-head">
        <div>
          <div className="dd-date">{P.prettyDate(iso)}</div>
          <div className="dd-sub mono">{(me.presets[record ? record.presetId : P.presetForDate(iso)] || {}).name}</div>
        </div>
        {editable && <button className="btn btn-sm btn-accent" onClick={() => {
          if (iso > today) updateMe((m) => { if (!m.days[iso]) m.days[iso] = P.newDayRecord(iso, P.presetForDate(iso), m.presets); });
          onSetDate(iso); onGotoChecklist();
        }}>{iso > today ? "Plan day →" : iso === today ? "Open today →" : "Edit day →"}</button>}
        {!editable && !isFuture && record && <button className="btn btn-sm" onClick={() => { onSetDate(iso); onGotoChecklist(); }}>View history →</button>}
      </div>

      {events.length > 0 && <div className="dd-events">{events.map((e) => <span key={e.id} className={"dd-event " + e.type} style={{ cursor: "pointer" }} onClick={() => onEditEvent && onEditEvent(e)}>{e.title} <span style={{ opacity: 0.5, fontSize: 11 }}>✎</span></span>)}</div>}

      {record ? (
        <>
          <div className="dd-statsrow">
            <Ring pct={pct} size={66} stroke={6}><span className="mono dd-ring">{record.completed ? "✓" : Math.round(pct * 100) + "%"}</span></Ring>
            <div className="dd-mini-stats">
              <div><b className="mono">{record.sleepHrs != null ? record.sleepHrs + "h" : "—"}</b><span>sleep</span></div>
              <div><b className="mono">{record.wokeTime || "—"}</b><span>woke</span></div>
              <div><b className="mono">{Math.round(contribs.STR + contribs.END)}</b><span>train min</span></div>
              <div><b className="mono">{Math.round(contribs.SKL)}</b><span>skill min</span></div>
            </div>
          </div>
          <div className="dd-contribs">
            {P.CAT_ORDER.filter((c) => contribs[c] > 0).map((c) => <span key={c} className="dd-contrib"><StatChip stat={c} /> {Math.round(contribs[c])} {P.CATS[c].unit}</span>)}
          </div>

          {record.reflection && <div className="dd-reflection"><div className="dd-section-label">REFLECTION · felt {record.reflection.feel}/5</div><p>{record.reflection.note || "—"}</p></div>}
          {skillLogs.length > 0 && <div className="dd-block"><div className="dd-section-label">SKILL</div>{skillLogs.map((s, i) => <div className="dd-skill" key={i}><b>{s.skill}</b> <span className="mono dim">{s.min}m</span><div>{s.what}</div></div>)}</div>}
          {workouts.length > 0 && <div className="dd-block"><div className="dd-section-label">WORKOUTS</div>{workouts.map((w, i) => <div className="dd-skill" key={i}><b>{w.name}</b><div className="mono">◆{w.q.intensity} · felt {w.q.feel}/5</div>{w.q.note && <div>{w.q.note}</div>}</div>)}</div>}
        </>
      ) : <Empty>{isFuture ? "Upcoming — schedule events or plan ahead." : "No log for this day."}</Empty>}

      <div className="dd-block">
        <div className="dd-section-label">PHOTOS <button className="mini-btn" onClick={() => fileRef.current.click()}>+ add</button></div>
        <input ref={fileRef} type="file" accept="image/*" multiple style={{ display: "none" }} onChange={(e) => handleFiles(e.target.files)} />
        {record && record.photos && record.photos.length > 0 ? (
          <div className="dd-photos">{record.photos.map((ph) => (
            <div key={ph.id} className="dd-photo"><img src={ph.data} alt="" /><button className="photo-del" onClick={() => updateMe((m) => { m.days[iso].photos = m.days[iso].photos.filter((x) => x.id !== ph.id); })}>✕</button>{ph.caption && <div className="photo-cap">{ph.caption}</div>}</div>
          ))}</div>
        ) : <div className="dd-photo-drop" onClick={() => fileRef.current.click()}>drop / click to add photos</div>}
      </div>

      <div className="dd-block">
        <div className="dd-section-label">DAY NOTE</div>
        <textarea className="ta" rows={3} value={note} placeholder="Anything worth remembering…" onChange={(e) => setNote(e.target.value)} onBlur={() => updateMe((m) => { ensure(m).dayNote = note; })} />
      </div>
    </div>
  );
}

Object.assign(window, { Calendar });