// zephyr-swimlane.jsx — grouped by workstream, columns are time buckets.
// Supports drag-and-drop between release columns; drops snap epic target
// dates to the destination release boundary and persist via tweak overrides.

const { EpicCard: SW_EpicCard, LaneChip: SW_LaneChip } = window.ZephyrComponents;
const SW_D = window.ZEPHYR_DATA;

// Each bucket has an end date; dropping into it snaps epic.end to that.
const SW_BUCKETS = [
  { id: "demo",   label: "Demo Release",     sub: "Apr 28, 2026",      endDate: "2026-04-28", test: e => e.end <= "2026-04-28" },
  { id: "r1",     label: "Release 1 · 30-Day", sub: "by May 28, 2026", endDate: "2026-05-28", test: e => e.end > "2026-04-28" && e.end <= "2026-05-28" },
  { id: "r2",     label: "Release 2 · 60-Day", sub: "by Jun 27, 2026", endDate: "2026-06-27", test: e => e.end > "2026-05-28" && e.end <= "2026-06-27" },
  { id: "r3",     label: "Release 3 · 90-Day", sub: "by Jul 27, 2026", endDate: "2026-07-27", test: e => e.end > "2026-06-27" && e.end <= "2026-07-27" },
  { id: "beyond", label: "Beyond",            sub: "Q3 2026+",         endDate: "2026-09-30", test: e => e.end > "2026-07-27" },
];

function SwimlaneView({ onEpicClick, laneFilter = "all", overrides = {}, onOverridesChange }) {
  const [dragId, setDragId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null); // bucketId

  // Apply overrides on top of base epic data
  const epics = SW_D.epics.map(e => {
    const o = overrides[e.id];
    return o ? { ...e, end: o.end || e.end } : e;
  });

  const onDragStart = (e, epicId) => {
    setDragId(epicId);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", epicId);
  };
  const onDragEnd = () => { setDragId(null); setDragOver(null); };
  const onDragEnterCell = (bucketId) => setDragOver(bucketId);
  const onDragOverCell = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; };
  const onDropCell = (e, bucket) => {
    e.preventDefault();
    const id = e.dataTransfer.getData("text/plain") || dragId;
    if (!id) return;
    const epic = SW_D.epics.find(x => x.id === id);
    if (!epic) return;
    // Snap end to bucket.endDate; if start would be after end, also pull start in.
    const newEnd = bucket.endDate;
    const newOverride = { end: newEnd };
    const next = { ...overrides, [id]: newOverride };
    // Clean up no-op (matches base)
    if (newEnd === epic.end) {
      delete next[id];
    }
    onOverridesChange(next);
    setDragId(null);
    setDragOver(null);
  };

  return (
    <div className="zr-sw">
      {/* Column heads */}
      <div className="zr-sw-grid zr-sw-heads">
        <div className="zr-sw-lane-head-ph" />
        {SW_BUCKETS.map(b => (
          <div key={b.id} className={`zr-sw-col-head ${dragOver === b.id ? "drop" : ""}`}>
            <div className="ttl">{b.label}</div>
            <div className="sub">{b.sub}</div>
          </div>
        ))}
      </div>

      {/* Lanes */}
      {SW_D.workstreams.filter(l => laneFilter === "all" || l.id === laneFilter).map(l => {
        const laneEpics = epics.filter(e => e.lane === l.id);
        if (laneEpics.length === 0) return null;
        return (
          <div key={l.id} className="zr-sw-grid zr-sw-lane" style={{ "--lane-color": l.color }}>
            <div className="zr-sw-lane-head">
              <span className="zr-lane-chip" style={{ color: l.color }}>{l.label}</span>
              <div className="blurb">{l.blurb}</div>
              <div className="ct">{laneEpics.length} items</div>
            </div>
            {SW_BUCKETS.map(b => {
              const es = laneEpics.filter(b.test);
              const isOver = dragOver === b.id && dragId;
              return (
                <div key={b.id}
                     className={`zr-sw-cell ${isOver ? "drop-target" : ""}`}
                     onDragEnter={() => onDragEnterCell(b.id)}
                     onDragOver={onDragOverCell}
                     onDrop={(e) => onDropCell(e, b)}>
                  {es.length === 0 ? (
                    <div className="empty">{isOver ? "↓ drop here" : "—"}</div>
                  ) : (
                    es.map(e => {
                      const isOverridden = !!overrides[e.id];
                      return (
                        <div key={e.id}
                             draggable
                             onDragStart={(ev) => onDragStart(ev, e.id)}
                             onDragEnd={onDragEnd}
                             className={`zr-sw-drag ${dragId === e.id ? "dragging" : ""} ${isOverridden ? "overridden" : ""}`}>
                          <SW_EpicCard epic={e} onClick={onEpicClick} />
                        </div>
                      );
                    })
                  )}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

window.ZephyrSwimlane = SwimlaneView;