/* ============================================================
   WCW Product Hub — Pipeline (board + table)
   ============================================================ */
const { useState: useStatePipe } = React;

function PCard({ p, onOpen, onDragStart, onDragEnd }) {
  const D = window.HUB_DATA;
  const S = D.STAGES.find(s => s.id === p.stage);
  return (
    <div className="pcard" draggable
      onDragStart={e => onDragStart(e, p)}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(p)}>
      <div className="pc-top">
        <div>
          <div className="pc-name">{p.name}</div>
          <div className="pc-vendor">{p.vendor}</div>
        </div>
        <span className="tag code">{p.dept}</span>
      </div>
      <div className="pc-foot">
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Avatar name={p.assignedTo} size="xs" />
          <Aging days={p.days} />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          {p.comments && p.comments.length > 0 && (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 3, color: "var(--ink-3)", fontSize: 11.5, fontWeight: 700 }}>
              <Icon name="chat" size={13} /> {p.comments.length}
            </span>
          )}
          {p.accounts && p.accounts.length > 0 && (
            <span className="pill sales" style={{ fontSize: 10.5, padding: "2px 8px" }}><Icon name="store" size={11} /> {p.accounts.length}</span>
          )}
        </div>
      </div>
      {(p.viaReactivation || (p.flags && p.flags.length > 0)) && (
        <div className="pc-tags">
          {p.viaReactivation && <span className="tag" style={{ background: "color-mix(in oklch, var(--mkt) 14%, white)", color: "var(--mkt)" }}><Icon name="clock" size={11} /> Reactivation</span>}
          {p.flags && p.flags.map((f, i) => <span key={i} className="tag warn"><Icon name="alert" size={11} /> {f.text}</span>)}
        </div>
      )}
    </div>
  );
}

function BoardView({ products, onOpen, onMove, filter, setFilter }) {
  const D = window.HUB_DATA;
  const [dragId, setDragId] = useStatePipe(null);
  const [overStage, setOverStage] = useStatePipe(null);

  const onDragStart = (e, p) => { setDragId(p.id); e.dataTransfer.effectAllowed = "move"; };
  const onDragEnd = () => { setDragId(null); setOverStage(null); };
  const onDrop = (stageId) => {
    if (dragId) { onMove(dragId, stageId); }
    setDragId(null); setOverStage(null);
  };

  let shown = products;
  if (filter === "stalled") shown = products.filter(p => p.days >= 7);
  else if (filter === "mine") shown = products.filter(p => p.accounts && p.accounts.length);

  return (
    <div className="page page-wide viewfade">
      <div className="page-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Pipeline</div>
          <h1>Pipeline board</h1>
          <div className="sub">Drag a card between stages to advance it. Click to open the full record.</div>
        </div>
      </div>

      <div className="filterbar">
        <button className={`chip ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>All in flight <span className="c-num">{products.length}</span></button>
        <button className={`chip alert ${filter === "stalled" ? "active" : ""}`} onClick={() => setFilter("stalled")}><Icon name="alert" size={12} /> Stalled 7+ days <span className="c-num">{products.filter(p => p.days >= 7).length}</span></button>
        <button className={`chip ${filter === "mine" ? "active" : ""}`} onClick={() => setFilter("mine")}><Icon name="store" size={12} /> Has sales demand <span className="c-num">{products.filter(p => p.accounts && p.accounts.length).length}</span></button>
      </div>

      <div className="board">
        {D.STAGES.map(s => {
          const cards = shown.filter(p => p.stage === s.id);
          return (
            <div className="board-col" key={s.id}>
              <div className="board-col-head">
                <span className="bc-dot" style={{ background: `var(${s.varName})` }}></span>
                <span className="bc-name">{s.name}</span>
                <span className="bc-count">{cards.length}</span>
              </div>
              <div className={`board-col-body ${overStage === s.id && dragId ? "drop-target" : ""}`}
                onDragOver={e => { e.preventDefault(); setOverStage(s.id); }}
                onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setOverStage(null); }}
                onDrop={() => onDrop(s.id)}>
                {cards.map(p => (
                  <div key={p.id} className={dragId === p.id ? "dragging" : ""}>
                    <PCard p={p} onOpen={onOpen} onDragStart={onDragStart} onDragEnd={onDragEnd} />
                  </div>
                ))}
                {cards.length === 0 && (
                  <div style={{ textAlign: "center", padding: "20px 8px", color: "var(--ink-4)", fontSize: 12 }}>
                    {dragId ? "Drop here" : "Empty"}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ListView({ products, onOpen, filter, setFilter, title }) {
  const D = window.HUB_DATA;
  let shown = products;
  if (filter === "stalled") shown = products.filter(p => p.days >= 7);
  else if (filter && filter !== "all") shown = products.filter(p => p.stage === filter);

  return (
    <div className="page page-wide viewfade">
      <div className="page-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Pipeline</div>
          <h1>{title || "All products"}</h1>
          <div className="sub">Every product currently moving through onboarding.</div>
        </div>
      </div>

      <div className="filterbar">
        <button className={`chip ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>All <span className="c-num">{products.length}</span></button>
        <button className={`chip alert ${filter === "stalled" ? "active" : ""}`} onClick={() => setFilter("stalled")}><Icon name="alert" size={12} /> Stalled <span className="c-num">{products.filter(p => p.days >= 7).length}</span></button>
        {D.STAGES.map(s => (
          <button key={s.id} className={`chip ${filter === s.id ? "active" : ""}`} onClick={() => setFilter(s.id)}>
            {s.name} <span className="c-num">{products.filter(p => p.stage === s.id).length}</span>
          </button>
        ))}
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Product</th><th>Dept</th><th>Owner</th><th>Stage</th><th>Days</th><th>Progress</th><th>Demand</th>
            </tr>
          </thead>
          <tbody>
            {shown.map(p => (
              <tr key={p.id} onClick={() => onOpen(p)}>
                <td>
                  <div className="prod-cell">
                    <div className="pn">{p.name}{p.viaReactivation && <span className="tag" style={{ marginLeft: 8, background: "color-mix(in oklch, var(--mkt) 14%, white)", color: "var(--mkt)", fontSize: 9.5 }}><Icon name="clock" size={10} /> Reactivation</span>}</div>
                    <div className="pv">{p.vendor}</div>
                  </div>
                </td>
                <td><span className="tag code">{p.dept}</span></td>
                <td><div style={{ display: "flex", alignItems: "center", gap: 8 }}><Avatar name={p.assignedTo} size="xs" /><span style={{ fontSize: 12.5 }}>{p.assignedTo.split(" ")[0]}</span></div></td>
                <td><StagePill stage={p.stage} /></td>
                <td><Aging days={p.days} /></td>
                <td><Steps pct={p.progress} /></td>
                <td>{p.accounts && p.accounts.length ? <span className="pill sales" style={{ fontSize: 10.5 }}><Icon name="store" size={11} /> {p.accounts.length}</span> : <span style={{ color: "var(--ink-4)" }}>—</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {shown.length === 0 && <div className="empty"><b>Nothing here</b>Try a different filter.</div>}
      </div>
    </div>
  );
}

Object.assign(window, { BoardView, ListView, PCard });