const Pipeline = ({ pieces, onPieceAdd, setOpenPieceId }) => {
  // Pipeline = pieces WITHOUT a scheduled date
  const pipelinePieces = pieces.filter(p => !p.scheduledDate);

  const addToStage = (stage) => {
    const newPiece = {
      id: "p-" + Date.now(),
      title: "New piece", format: "Video", niche: "", stage,
      scheduledDate: null, approved: stage === "Approved",
      cta: "", keyword: "", notes: "", hooks: [], talkingPoints: "", affiliateLinks: "",
    };
    onPieceAdd(newPiece);
    setOpenPieceId(newPiece.id);
  };

  return (
    <div>
      <div className="pagehead">
        <div>
          <div className="eyebrow">Content Pipeline</div>
          <h1>Pipeline</h1>
          <p className="sub">Move pieces through stages. Schedule a piece to move it to the calendar.</p>
        </div>
      </div>

      <div className="pipe-kanban">
        {PIECE_STAGES.map((stage, si) => {
          const stagePieces = pipelinePieces.filter(p => p.stage === stage);
          return (
            <div key={stage} className="pipe-lane">
              <div className="pipe-lane-head">
                <span className="pipe-lane-title">{stage}</span>
                <span className="pipe-lane-count">{stagePieces.length}</span>
              </div>
              {stagePieces.map(p => (
                <PipeCard key={p.id} piece={p} stageIndex={si}
                  onOpen={() => setOpenPieceId(p.id)}
                  onMove={dir => {
                    const newStage = PIECE_STAGES[si + dir];
                    if (newStage) {
                      // find the actual piece and update via parent — use a custom event
                      document.dispatchEvent(new CustomEvent("pipe-move", { detail: { id: p.id, stage: newStage, approved: newStage === "Approved" } }));
                    }
                  }}
                />
              ))}
              <button className="pipe-add-btn" onClick={() => addToStage(stage)}>
                <Icon name="plus" size={13} /> Add
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const PipeCard = ({ piece, stageIndex, onOpen, onMove }) => (
  <div className="pipe-card">
    <div className="pipe-card-body" onClick={onOpen}>
      <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap", marginBottom: 8 }}>
        <FormatBadge format={piece.format} />
        {piece.niche && <NicheTag niche={piece.niche} size="sm" />}
        {piece.approved && <span style={{ fontSize: 10, color: "#5E7A5A", fontWeight: 600 }}>✓</span>}
      </div>
      <div className="pipe-card-title serif">{piece.title}</div>
    </div>
    <div className="pipe-card-moves">
      <button className="pipe-move-btn" disabled={stageIndex === 0} onClick={() => onMove(-1)} title="Move back">←</button>
      <button className="pipe-move-btn" disabled={stageIndex === PIECE_STAGES.length - 1} onClick={() => onMove(1)} title="Move forward">→</button>
    </div>
  </div>
);

window.Pipeline = Pipeline;