// zephyr-views.jsx — the three view components + drawer + milestone rail.
// Assumes React + window.ZEPHYR_DATA are loaded first.

const D = window.ZEPHYR_DATA;

// ── helpers ─────────────────────────────────────────────────────────────────
const fmtDate = (iso) => {
  const [y, m, d] = iso.split("-").map(Number);
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${months[m-1]} ${d}`;
};
const fmtDateFull = (iso) => {
  const [y, m, d] = iso.split("-").map(Number);
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${months[m-1]} ${d}, ${y}`;
};
const daysBetween = (a, b) => Math.round((new Date(b) - new Date(a)) / 86400000);
const laneById = (id) => D.workstreams.find(w => w.id === id);
const epicById = (id) => D.epics.find(e => e.id === id);

function StatusChip({ status }) {
  const s = D.statuses[status];
  if (!s) return null;
  return (
    <span className={`zr-chip zr-chip-${status}`}><span className="dot"></span>{s.label}</span>
  );
}
function LaneChip({ laneId }) {
  const l = laneById(laneId);
  if (!l) return null;
  return <span className="zr-lane-chip" style={{ color: l.color }}>{l.label}</span>;
}

function EpicCard({ epic, onClick, showLane = false }) {
  const lane = laneById(epic.lane);
  return (
    <div
      className={`zr-card ${epic.status === "done" ? "zr-done-hide" : ""}`}
      style={{ "--lane-color": lane.color }}
      onClick={() => onClick(epic)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(epic); } }}
    >
      <div className="t-row">
        <h4>{epic.title}</h4>
        <StatusChip status={epic.status} />
      </div>
      <p>{epic.summary}</p>
      <div className="foot">
        {showLane && <><LaneChip laneId={epic.lane} /><span className="sep sep-l">·</span></>}
        <span className="owner">{epic.owner}</span>
        <span className="sep sep-o">·</span>
        <span className="dates">{fmtDate(epic.start)} → {fmtDate(epic.end)}</span>
        {epic.deps && epic.deps.length > 0 && (
          <>
            <span className="sep sep-d">·</span>
            <span>deps: {epic.deps.length}</span>
          </>
        )}
      </div>
    </div>
  );
}

// ── Drawer ──────────────────────────────────────────────────────────────────
function Drawer({ epic, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const open = !!epic;
  const lane = epic ? laneById(epic.lane) : null;
  const status = epic ? D.statuses[epic.status] : null;
  const dependents = epic ? D.epics.filter(e => (e.deps || []).includes(epic.id)) : [];

  return (
    <>
      <div className={`zr-drawer-scrim ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`zr-drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        {epic && (
          <>
            <div className="hd">
              <button className="close" onClick={onClose} aria-label="Close">✕</button>
              <div className="eb">{lane.label} · {epic.id}</div>
              <h3>{epic.title}</h3>
              <div className="meta-row">
                <StatusChip status={epic.status} />
                <span className="sep">·</span>
                <span>{epic.owner}</span>
                <span className="sep">·</span>
                <span>{fmtDateFull(epic.start)} → {fmtDateFull(epic.end)}</span>
              </div>
            </div>
            <div className="body">
              <h5>Summary</h5>
              <p>{epic.summary}</p>

              {epic.details && epic.details.length > 0 && (
                <>
                  <h5>Details</h5>
                  <ul>
                    {epic.details.map((d, i) => <li key={i}>{d}</li>)}
                  </ul>
                </>
              )}

              <h5>Metadata</h5>
              <dl className="kv">
                <dt>Workstream</dt><dd>{lane.label}</dd>
                <dt>Status</dt><dd>{status.label}</dd>
                <dt>Owner</dt><dd>{epic.owner}</dd>
                <dt>Start</dt><dd>{fmtDateFull(epic.start)}</dd>
                <dt>Target</dt><dd>{fmtDateFull(epic.end)}</dd>
                <dt>Duration</dt><dd>{daysBetween(epic.start, epic.end)} days</dd>
                <dt>Epic ID</dt><dd>{epic.id}</dd>
              </dl>

              {epic.deps && epic.deps.length > 0 && (
                <>
                  <h5>Depends on</h5>
                  <div>
                    {epic.deps.map(id => {
                      const dep = epicById(id);
                      return dep ? <span className="dep-chip" key={id}>{dep.title}</span> : null;
                    })}
                  </div>
                </>
              )}

              {dependents.length > 0 && (
                <>
                  <h5>Blocks</h5>
                  <div>
                    {dependents.map(dep => (
                      <span className="dep-chip" key={dep.id}>{dep.title}</span>
                    ))}
                  </div>
                </>
              )}
            </div>
          </>
        )}
      </aside>
    </>
  );
}

// ── Milestones rail (shared across views) ───────────────────────────────────
function MilestoneRail({ start, end }) {
  const total = daysBetween(start, end);
  const pct = (d) => Math.max(0, Math.min(100, (daysBetween(start, d) / total) * 100));
  return (
    <div className="zr-ms-rail">
      <div className="zr-ms-head">
        <span className="eb">Milestones</span>
      </div>
      <div className="zr-ms-track">
        <div className="zr-ms-line" />
        {D.milestones.map(m => {
          const left = pct(m.date);
          if (left < 0 || left > 100) return null;
          return (
            <div key={m.id} className={`zr-ms-pin zr-ms-${m.kind}`} style={{ left: `${left}%` }}>
              <div className="pin" />
              <div className="flag">
                <div className="d">{fmtDate(m.date)}</div>
                <div className="t">{m.label}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ZephyrComponents = { EpicCard, StatusChip, LaneChip, Drawer, MilestoneRail, fmtDate, fmtDateFull, daysBetween, laneById, epicById };