// Roadmap view — long-horizon planning. The procedural-visual moment.

function RoadmapView({ tasks, today, tweaks }) {
  const U = window.CAIRN_UTIL;
  const phases = window.CAIRN.PHASES;

  const overallStart = phases[0].startDate;
  const lastPhaseOriginalEnd = phases[phases.length - 1].endDate;
  // Stretch the effective end to cover planned tasks that land past the last phase.
  const furthestPlanned = tasks.reduce(function(mx, t) {
    return (t.scheduledDate && t.scheduledDate > mx) ? t.scheduledDate : mx;
  }, lastPhaseOriginalEnd);
  const overallEnd = furthestPlanned;
  const totalDays = U.daysBetween(overallStart, overallEnd) + 1;

  // Compute month tick positions on the shared timeline
  const months = [];
  let cur = U.parseISO(overallStart);
  cur = new Date(cur.getFullYear(), cur.getMonth(), 1);
  const endDate = U.parseISO(overallEnd);
  while (cur <= endDate) {
    const iso = U.isoDate(cur);
    const offset = U.daysBetween(overallStart, iso);
    if (offset >= 0) {
      months.push({
        iso,
        label: U.MONTHS[cur.getMonth()],
        year: cur.getFullYear(),
        pct: (offset / totalDays) * 100,
      });
    }
    cur = new Date(cur.getFullYear(), cur.getMonth() + 1, 1);
  }

  // Today line position
  const todayPct = (U.daysBetween(overallStart, today) / totalDays) * 100;

  return (
    <div className="shell roadmap">
      <div className="roadmap__head">
        <div>
          <h2 className="display roadmap__title">Roadmap</h2>
          <p className="meta roadmap__range">
            {U.formatRangeMonth(overallStart, overallEnd).toUpperCase()} ·
            {' '}{phases.length} PHASES
          </p>
        </div>
      </div>

      {/* Timeline scale */}
      <div className="roadmap__scale-wrap">
        <div className="roadmap__scale">
          {months.map((m, i) => {
            const align = m.pct < 5 ? "0" : m.pct > 95 ? "-100%" : "-50%";
            return (
              <div
                key={i}
                className="roadmap__month"
                style={{ left: `${m.pct}%`, transform: `translateX(${align})` }}
              >
                <span className="meta-sm roadmap__month-tick">
                  {m.label.toUpperCase()}
                </span>
              </div>
            );
          })}
          {/* Today line — only render when today is within the roadmap range */}
          {todayPct >= 0 && todayPct <= 100 && (
            <div className="roadmap__today-line" style={{ left: `${todayPct}%` }}>
              <span className="meta-sm roadmap__today-label">Today</span>
            </div>
          )}
        </div>
      </div>

      {/* Phase rows */}
      <div className="roadmap__phases">
        {phases.map((phase, i) => {
          const isLast = i === phases.length - 1;
          const p = (isLast && overallEnd !== lastPhaseOriginalEnd)
            ? Object.assign({}, phase, { endDate: overallEnd })
            : phase;
          return (
            <PhaseRow
              key={p.id}
              phase={p}
              tasks={tasks}
              overallStart={overallStart}
              totalDays={totalDays}
              today={today}
              isActive={today >= p.startDate && today <= p.endDate}
              isPast={today > p.endDate}
            />
          );
        })}
      </div>
    </div>
  );
}

function PhaseRow({ phase, tasks, overallStart, totalDays, today, isActive, isPast }) {
  const U = window.CAIRN_UTIL;
  const startOffset = U.daysBetween(overallStart, phase.startDate);
  const phaseLen = U.daysBetween(phase.startDate, phase.endDate) + 1;
  const leftPct = (startOffset / totalDays) * 100;
  const widthPct = (phaseLen / totalDays) * 100;

  // Build day-by-day procedural row
  const phaseTasks = tasks.filter(t =>
    t.scheduledDate && t.scheduledDate >= phase.startDate && t.scheduledDate <= phase.endDate
  );
  const tasksByDate = {};
  phaseTasks.forEach(t => {
    if (!tasksByDate[t.scheduledDate]) tasksByDate[t.scheduledDate] = [];
    tasksByDate[t.scheduledDate].push(t);
  });

  // Build day marks
  const dayMarks = [];
  for (let i = 0; i < phaseLen; i++) {
    const iso = U.isoDate(U.addDays(U.parseISO(phase.startDate), i));
    const dayTasks = tasksByDate[iso] || [];
    let glyph = "none";
    let trackColor = null;
    if (dayTasks.length === 0) {
      glyph = "none";
    } else {
      // Aggregate status: if any done, "done"; if all skipped, "skipped"; else "planned"
      const anyDone = dayTasks.some(t => t.status === "done");
      const allSkipped = dayTasks.every(t => t.status === "skipped");
      if (anyDone) glyph = "done";
      else if (allSkipped) glyph = "skipped";
      else glyph = "planned";
      trackColor = U.track(dayTasks[0].track).color;
    }
    dayMarks.push({ iso, glyph, trackColor, count: dayTasks.length });
  }

  return (
    <div className={`phase ${isActive ? "phase--active" : ""} ${isPast ? "phase--past" : ""}`}>
      <div className="phase__head">
        <div className="phase__name-wrap">
          {isActive && <span className="phase__dot" />}
          <h3 className="phase__name">{phase.name}</h3>
        </div>
        <span className="meta-sm phase__dates">
          {U.formatRangeMonth(phase.startDate, phase.endDate).toUpperCase()}
        </span>
      </div>
      <p className="phase__desc text-pretty">{phase.description}</p>

      {/* The band on the global timeline + procedural row directly under it */}
      <div className="phase__track">
        <div
          className="phase__band"
          style={{ left: `${leftPct}%`, width: `${widthPct}%` }}
        >
          <div className="phase__day-grid">
            {dayMarks.map((d, i) => (
              <DayGlyph key={i} d={d} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function DayGlyph({ d }) {
  // 4 forms:
  //  none   — empty (just a vertical hairline)
  //  planned — 1px hairline tick (vertical line in track color)
  //  done    — solid filled square in track color
  //  skipped — outlined square in track color
  if (d.glyph === "none") {
    return <span className="dg dg--none" />;
  }
  if (d.glyph === "planned") {
    return <span className="dg dg--planned" style={{ background: d.trackColor }} />;
  }
  if (d.glyph === "done") {
    return <span className="dg dg--done" style={{ background: d.trackColor }} />;
  }
  if (d.glyph === "skipped") {
    return <span className="dg dg--skipped" style={{ borderColor: d.trackColor }} />;
  }
  return null;
}

window.RoadmapView = RoadmapView;