// TimelineSection — the draft plan's gantt rendered INSIDE the assembly canvas
// world layer, in the station design language: one dotted "week station" per
// ISO week (header strip + dashed body, like StationNode/ShippedNode) and
// phase-colored bars that reach ACROSS week stations. Pure render: geometry
// comes from lib/timeline-layout.js; AssemblyCanvas picks the origin. The
// nodes are static (not CanvasNode-draggable) — weeks are an axis, not cards.

// Bar colors are decided per phase in lib/plan-to-gantt.js and ride along on each
// bar, so the canvas and the document-flow Timeline color the same phase the same
// way. Fall back to the first palette slot for a bar built before that existed.
const tsBarColor = (bar) => bar.color || window.TimelineFormat.phaseColorAt(0);

// Props: { gantt, origin, stale, regenerating, rereview, onApproveRereview, onReviseRereview }
// stale/regenerating drive the section badge+spinner (the plan is the middle link
// of the brief→plan→line chain). `rereview` (a pending plan `gate {kind:"rereview"}`)
// renders the on-canvas Approve/Revise affordance — the ONLY place the re-review
// gate surfaces (ChatPanel dedupes it from the transcript).
const TimelineSection = ({ gantt, origin, stale = false, regenerating = false, rereview = null, onApproveRereview, onReviseRereview }) => {
  const { weekNodes, bars, width } = window.TimelineLayout.timelineLayout(gantt, origin);
  if (!weekNodes.length) return null;
  return (
    <>
      {/* Section label — station-strip styling, seated just above the weeks */}
      <div
        style={{ position: 'absolute', transform: `translate3d(${origin.x}px, ${origin.y - 36}px, 0)`, width }}
        className="px-3 py-1.5 text-[10px] uppercase font-bold tracking-widest text-neutral-500 select-none flex items-center gap-2 whitespace-nowrap"
      >
        Timeline · one station per week
        <window.StaleBadge stale={stale} regenerating={regenerating} label="Regenerating the plan…" />
      </div>

      {/* Plan re-review affordance — a pending kind:"rereview" plan gate; seated as a
          banner above the section label. Approve acknowledges; Revise targets chat. */}
      {rereview && (
        <div
          style={{ position: 'absolute', transform: `translate3d(${origin.x}px, ${origin.y - 96}px, 0)`, width, zIndex: 30 }}
          className="rounded-xl border border-amber-200 bg-amber-50 shadow-sm px-3 py-2 flex items-center justify-between gap-3"
        >
          <span className="text-xs font-semibold text-amber-800">The plan changed — re-review it.</span>
          <span className="flex gap-2 shrink-0">
            <button
              type="button"
              onClick={() => onApproveRereview && onApproveRereview()}
              className="px-3 py-1.5 text-xs font-semibold rounded-md bg-emerald-600 text-white hover:bg-emerald-700"
            >Approve</button>
            <button
              type="button"
              onClick={() => onReviseRereview && onReviseRereview()}
              className="px-3 py-1.5 text-xs font-semibold rounded-md bg-white border border-neutral-300 text-neutral-700 hover:bg-neutral-100"
            >Revise</button>
          </span>
        </div>
      )}

      {weekNodes.map((w) => (
        <div key={w.id} style={{ position: 'absolute', transform: `translate3d(${w.x}px, ${w.y}px, 0)`, width: w.w, height: w.h }}>
          <div className="h-full rounded-2xl">
            <div className={`px-3 py-1.5 border border-b-0 rounded-t-2xl select-none flex items-center gap-2 backdrop-blur-sm ${w.holiday ? 'bg-neutral-300/40 border-neutral-300/70' : 'bg-neutral-200/40 border-neutral-300/60'}`}>
              <span className="text-[10px] uppercase font-bold tracking-widest text-neutral-500 flex-1">
                Week {w.week}
                {w.dateLabel && <span className="ml-1.5 normal-case tracking-normal font-semibold text-neutral-400">· {w.dateLabel}</span>}
              </span>
              {w.holiday && <span className="text-[9px] uppercase font-bold tracking-widest text-amber-600">Holiday</span>}
            </div>
            <div className={`border-2 border-dashed rounded-b-2xl ${w.holiday ? 'border-neutral-300 bg-neutral-200/20' : 'border-neutral-300'}`} style={{ height: w.h - 32 }} />
          </div>
        </div>
      ))}

      {bars.map((b) => (
        <div
          key={b.feature}
          title={`${b.title} — ${b.phase} (weeks ${b.startWeek}–${b.endWeek})`}
          style={{ position: 'absolute', transform: `translate3d(${b.x}px, ${b.y}px, 0)`, width: b.w, height: b.h, zIndex: 5 }}
          className={`rounded-lg px-3 flex items-center text-xs font-semibold text-white shadow-md ${tsBarColor(b)}`}
        >
          <span className="truncate">{b.title}</span>
        </div>
      ))}
    </>
  );
};

if (typeof window !== 'undefined') {
  window.TimelineSection = TimelineSection;
}