// zephyr-list.jsx — sortable/groupable table view.

const { EpicCard: LS_EpicCard, StatusChip: LS_StatusChip, LaneChip: LS_LaneChip,
        fmtDate: _lsFmtDate, laneById: _lsLaneById } = window.ZephyrComponents;
const LS_D = window.ZEPHYR_DATA;

function ListView({ onEpicClick, laneFilter = "all" }) {
  const [group, setGroup] = React.useState("status");   // status | lane | owner | none
  const [sort, setSort]   = React.useState("end");      // end | start | title | owner

  const sorted = React.useMemo(() => {
    let copy = [...LS_D.epics];
    if (laneFilter !== "all") copy = copy.filter(e => e.lane === laneFilter);
    copy.sort((a, b) => {
      if (sort === "title" || sort === "owner") return a[sort].localeCompare(b[sort]);
      return a[sort].localeCompare(b[sort]);
    });
    return copy;
  }, [sort, laneFilter]);

  const groups = React.useMemo(() => {
    if (group === "none") return [["All", sorted]];
    if (group === "status") {
      const order = ["in_progress","design","scheduled","planned","blocked","evaluating","done"];
      return order.map(s => [LS_D.statuses[s].label, sorted.filter(e => e.status === s)]).filter(([, es]) => es.length);
    }
    if (group === "lane") {
      return LS_D.workstreams.map(w => [w.label, sorted.filter(e => e.lane === w.id)]).filter(([, es]) => es.length);
    }
    if (group === "owner") {
      const owners = [...new Set(sorted.map(e => e.owner))];
      return owners.map(o => [o, sorted.filter(e => e.owner === o)]);
    }
    return [["All", sorted]];
  }, [group, sorted]);

  return (
    <div className="zr-ls">
      <div className="zr-ls-controls">
        <div className="ctrl-group">
          <span className="ctrl-k">Group</span>
          <div className="seg">
            {[["status","Status"],["lane","Workstream"],["owner","Owner"],["none","None"]].map(([v,l]) => (
              <button key={v} className={group === v ? "on" : ""} onClick={() => setGroup(v)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="ctrl-group">
          <span className="ctrl-k">Sort</span>
          <div className="seg">
            {[["end","Target date"],["start","Start date"],["title","Title"],["owner","Owner"]].map(([v,l]) => (
              <button key={v} className={sort === v ? "on" : ""} onClick={() => setSort(v)}>{l}</button>
            ))}
          </div>
        </div>
      </div>

      {groups.map(([name, es]) => (
        <div key={name} className="zr-ls-group">
          <div className="zr-ls-group-head">
            <span className="ttl">{name}</span>
            <span className="ct">{es.length}</span>
          </div>
          <table className="zr-ls-table">
            <thead>
              <tr>
                <th className="c-id">ID</th>
                <th className="c-title">Epic</th>
                <th className="c-lane">Workstream</th>
                <th className="c-status">Status</th>
                <th className="c-owner">Owner</th>
                <th className="c-dates">Window</th>
                <th className="c-deps">Deps</th>
              </tr>
            </thead>
            <tbody>
              {es.map(e => {
                const lane = _lsLaneById(e.lane);
                return (
                  <tr key={e.id}
                      className={`zr-ls-row ${e.status === "done" ? "zr-done-hide" : ""}`}
                      style={{ "--lane-color": lane.color }}
                      onClick={() => onEpicClick(e)}>
                    <td className="c-id">{e.id}</td>
                    <td className="c-title">
                      <div className="ttl">{e.title}</div>
                      <div className="sum">{e.summary}</div>
                    </td>
                    <td className="c-lane"><LS_LaneChip laneId={e.lane} /></td>
                    <td className="c-status"><LS_StatusChip status={e.status} /></td>
                    <td className="c-owner"><span className="owner">{e.owner}</span></td>
                    <td className="c-dates"><span className="dates">{_lsFmtDate(e.start)} → {_lsFmtDate(e.end)}</span></td>
                    <td className="c-deps">{(e.deps || []).length > 0 ? `${(e.deps || []).length}` : "—"}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      ))}
    </div>
  );
}

window.ZephyrList = ListView;