/* Gang-sheet generation queue. Every "Create gang sheet" enqueues a background job
   (rendered one at a time); this is where you SEE them — queued / rendering / done /
   failed (with the error) — and can retry a failure, open the preview/builder, or
   dismiss a row. Polls /api/gang-sheet/queue. */

const GQ_BUILDER_URL = "https://dtf.uk/products/build-a-dtf-gang-sheet-online";
const gqAgo = (ts) => {
  if (!ts) return "";
  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
  if (s < 60) return s + "s ago";
  const m = Math.round(s / 60); if (m < 60) return m + "m ago";
  const h = Math.round(m / 60); if (h < 48) return h + "h ago";
  return Math.round(h / 24) + "d ago";
};
const GQ_BADGE = { queued: "badge--ghost", running: "badge--blue", done: "badge--green", error: "badge--red" };
const GQ_LABEL = { queued: "Queued", running: "Rendering", done: "Done", error: "Failed" };

function GangQueue({ go }) {
  const [jobs, setJobs] = useState(null);
  const [busy, setBusy] = useState(null);   // jobId being retried/dismissed
  const load = () => DTF.gangSheetQueue().then(j => setJobs(j || [])).catch(() => setJobs([]));
  useEffect(() => {
    let alive = true;
    const tick = () => DTF.gangSheetQueue().then(j => { if (alive) setJobs(j || []); }).catch(() => {});
    tick(); const t = setInterval(tick, 5000);
    return () => { alive = false; clearInterval(t); };
  }, []);

  const retry = async (id) => { setBusy(id); try { await DTF.gangSheetRetry(id); await load(); } catch (e) { alert(e.message); } finally { setBusy(null); } };
  const dismiss = async (id) => { setBusy(id); try { await DTF.gangSheetDismiss(id); await load(); } catch (e) { alert(e.message); } finally { setBusy(null); } };
  const openOwner = (j) => { const id = j.owner; if (!id) return; if (j.ownerType === "draft" || /^draft-/.test(String(id))) go({ view: "draft", id: String(id).replace(/^draft-/, "") }); else go({ view: "order", id: String(id).replace(/^#/, "") }); };

  const rows = jobs || [];
  const active = rows.filter(j => j.status === "queued" || j.status === "running").length;
  const failed = rows.filter(j => j.status === "error").length;

  return (
    <div className="board">
      <div className="stats">
        <div className="stat"><div className="stat__k">In queue</div><div className="stat__v">{jobs ? active : "—"}</div><div className="stat__d">queued or rendering</div></div>
        <div className="stat"><div className="stat__k">Failed</div><div className="stat__v" style={failed?{color:"#b91c1c"}:null}>{jobs ? failed : "—"}</div><div className="stat__d">need a retry</div></div>
        <div className="stat"><div className="stat__k">Recent</div><div className="stat__v">{jobs ? rows.length : "—"}</div><div className="stat__d">last 60 jobs</div></div>
      </div>
      <div className="toolbar">
        <span className="kick">One sheet renders at a time in the background · this page auto-refreshes</span>
        <button className="btn btn--ghost btn--sm right" onClick={load} disabled={jobs===null}><Icon name="refresh" /> Reload</button>
      </div>
      <div className="tbl-wrap">
        <table className="tbl stk-tbl">
          <thead><tr>
            <th style={{width:110}}>Status</th><th>Order / draft</th><th>Sheet</th><th>When</th><th>Details</th><th style={{width:200}}></th>
          </tr></thead>
          <tbody>
            {jobs === null
              ? Array.from({length:5}).map((_,i)=>(<tr key={i}><td colSpan={6} style={{padding:"10px 12px"}}><div className="skel skel-bar" style={{height:18,opacity:Math.max(0.35,1-i*0.12)}} /></td></tr>))
              : rows.length === 0
                ? <tr><td colSpan={6}><div className="empty" style={{padding:"28px 12px"}}><Icon name="image" /><div className="t">No gang sheets yet</div><div className="m">Create one from an order or draft — it queues here.</div></div></td></tr>
                : rows.map(j => {
                    const err = j.status === "error";
                    return (
                      <tr key={j.jobId} style={err?{background:"#fdf2f2"}:null}>
                        <td><span className={"badge " + (GQ_BADGE[j.status]||"badge--ghost")}>{j.status==="running" && <span className="spin" style={{marginRight:5}} />}{GQ_LABEL[j.status]||j.status}</span></td>
                        <td><a className="linklike" onClick={()=>openOwner(j)} style={{fontFamily:"var(--font-mono)"}}>{j.owner}</a></td>
                        <td className="num">{j.count!=null?`${j.count} up`:""}{j.lengthM!=null?` · ${j.lengthM}m`:""}</td>
                        <td className="dim" title={j.createdAt?new Date(j.createdAt).toLocaleString():""}>{gqAgo(j.finishedAt || j.startedAt || j.createdAt)}</td>
                        <td>{err
                          ? <span style={{color:"#b91c1c",fontSize:12}}>{j.error || "Failed"}</span>
                          : j.status==="done" && j.context
                            ? <span className="dim" style={{fontSize:12}}>{j.context.totalImages} images · {j.context.distinctImages} designs</span>
                            : <span className="dim" style={{fontSize:12}}>{j.status==="queued"?"waiting for the worker":"compositing…"}</span>}
                        </td>
                        <td style={{textAlign:"right",whiteSpace:"nowrap"}}>
                          {j.status==="done" && j.hash && <a className="linklike" href={"/g/"+j.hash} target="_blank" rel="noopener noreferrer" style={{marginRight:10}}>Preview ↗</a>}
                          {j.status==="done" && j.hash && <a className="linklike" href={GQ_BUILDER_URL+"?gs="+encodeURIComponent(j.hash)} target="_blank" rel="noopener noreferrer" style={{marginRight:10}}>Builder ↗</a>}
                          {err && <button className="btn btn--primary btn--sm" disabled={busy===j.jobId} onClick={()=>retry(j.jobId)} style={{marginRight:6}}>{busy===j.jobId?"…":"Retry"}</button>}
                          {j.status!=="running" && <button className="icon-btn" title={j.status==="queued"?"Cancel":"Dismiss"} disabled={busy===j.jobId} onClick={()=>dismiss(j.jobId)}><Icon name="x" /></button>}
                        </td>
                      </tr>
                    );
                  })}
          </tbody>
        </table>
      </div>
    </div>
  );
}