// Pipeline — kanban board with HTML5 drag-and-drop across stages.

const PIPE_STAGES = ["New", "Qualified", "Viewing", "Offer", "Reservation", "Closed"];

function DealCard({ lead, onOpen, onDragStart, onDragEnd, dragging }) {
  const a = agentById(lead.owner);
  return (
    <div
      className={`rc-deal ${dragging ? "is-dragging" : ""}`}
      draggable
      onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; onDragStart(lead.id); }}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(lead.id)}
    >
      <div className="rc-deal-top">
        <Avatar initials={lead.name.split(" ").map((x) => x[0]).join("")} size={26} color="var(--brand-soft)" />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="rc-deal-name">{lead.name}</div>
          <div className="rc-deal-sub">{devName(lead.dev)}{lead.unit ? " · " + lead.unit : ""}</div>
        </div>
      </div>
      <div className="rc-deal-foot">
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <Avatar initials={a.initials} size={18} color={a.color} />
          <span style={{ fontSize: 11, color: "var(--text-muted)" }}>{lead.lastTouch}</span>
        </div>
        <span className="rc-deal-value">{moneyK(lead.value)}</span>
      </div>
    </div>
  );
}

function Pipeline({ openLead, role }) {
  const me = RoleProfile(role);
  const isManager = role === "manager" || role === "admin";
  const initial = (isManager ? LEADS : LEADS.filter((l) => l.owner === me.id)).filter((l) => l.status !== "Lost");
  const [stages, setStages] = React.useState(() => {
    const map = {};
    initial.forEach((l) => { (map[l.status] = map[l.status] || []).push(l.id); });
    return map;
  });
  const [dragId, setDragId] = React.useState(null);
  const [overCol, setOverCol] = React.useState(null);
  const toast = useToast();

  const drop = (stage) => {
    if (!dragId) return;
    const from = leadById(dragId).status;
    setStages((prev) => {
      const next = {};
      PIPE_STAGES.forEach((s) => { next[s] = (prev[s] || []).filter((id) => id !== dragId); });
      next[stage] = [dragId, ...(next[stage] || [])];
      return next;
    });
    // mutate underlying record so it persists across re-render/openLead
    leadById(dragId).status = stage;
    if (from !== stage) toast({ tone: "ok", title: `Moved to ${stage}`, body: leadById(dragId).name });
    setDragId(null);
    setOverCol(null);
  };

  const colValue = (stage) => (stages[stage] || []).reduce((s, id) => s + leadById(id).value, 0);

  return (
    <div className="rc-page" style={{ maxWidth: "none" }}>
      <div className="rc-pagehead">
        <div>
          <h1 className="rc-h1">Pipeline</h1>
          <div className="rc-sub">Drag a card between stages · {initial.length} open deals · {moneyK(initial.reduce((s, l) => s + l.value, 0))} total value</div>
        </div>
        <button className="rc-btn-primary" onClick={() => openLead(initial[0]?.id)}><Icon name="plus" size={14} />New deal</button>
      </div>

      <div className="rc-board">
        {PIPE_STAGES.map((stage) => (
          <div
            key={stage}
            className={`rc-col ${overCol === stage ? "is-drop" : ""}`}
            onDragOver={(e) => { e.preventDefault(); setOverCol(stage); }}
            onDragLeave={(e) => { if (e.currentTarget === e.target) setOverCol(null); }}
            onDrop={() => drop(stage)}
          >
            <div className="rc-col-head">
              <span className="rc-col-dot" style={{ background: STAGE_COLOR[stage] }} />
              <span className="rc-col-name">{stage}</span>
              <span className="rc-col-count">{(stages[stage] || []).length}</span>
            </div>
            <div className="rc-col-sum">{moneyK(colValue(stage))}</div>
            <div className="rc-col-body">
              {(stages[stage] || []).map((id) => (
                <DealCard key={id} lead={leadById(id)} onOpen={openLead} dragging={dragId === id}
                  onDragStart={setDragId} onDragEnd={() => { setDragId(null); setOverCol(null); }} />
              ))}
              {(stages[stage] || []).length === 0 && (
                <div style={{ fontSize: 12, color: "var(--text-faint)", textAlign: "center", padding: "16px 8px" }}>Drop here</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Pipeline, PIPE_STAGES });