// New Business Pipeline — kanban of booked-but-not-yet-steady accounts.
// Cards are inline-editable; clicking a card body opens the existing ClientDrawer
// for deep-dive editing.

function NewBusinessPipeline({ onOpenClient }){
  // Subscribe to store
  const storeState = window.useStore(s => s);
  const items = window.Store ? window.Store.getCollection("newBusiness", NEW_BUSINESS) : NEW_BUSINESS;
  const stages = NEW_BUSINESS_STAGES;

  const update = (idx, patch) => window.Store && window.Store.updateInCollection("newBusiness", idx, patch);
  const remove = (idx) => window.Store && window.Store.removeFromCollection("newBusiness", idx);
  const add = (stageKey) => window.Store && window.Store.addToCollection("newBusiness", {
    company:"New prospect",
    segment:"MD Services",
    kind:"md",
    stage: stageKey,
    logoBg:"linear-gradient(135deg,#7C3F58,#D9A78E)",
    logoLetter:"?",
    value:"—",
    valueNote:"",
    owner:"Dr. Yohai",
    ownerInitials:"DY",
    nextStep:"Define next step",
    lastTouch:"Just added",
    notes:"",
  });

  const move = (idx, newStage) => update(idx, { stage: newStage });

  // Drag/drop
  const [dragIdx, setDragIdx] = React.useState(null);
  const [overStage, setOverStage] = React.useState(null);

  const totalsByStage = {};
  stages.forEach(s => { totalsByStage[s.k] = items.filter(i => i.stage === s.k).length; });

  const segmentOptions = [
    { value:"MD Services", label:"MD Services" },
    { value:"Management", label:"Management" },
    { value:"One-time event", label:"One-time event" },
  ];
  const kindFromSegment = (seg) => seg === "MD Services" ? "md" : seg === "Management" ? "mgmt" : "event";

  return (
    <section className="section" id="new-business">
      <div className="section-head">
        <div className="title">
          <span className="eyebrow">Booked · Not yet steady · Onboarding flow</span>
          <h2>New <em>business</em></h2>
        </div>
        <div className="meta">
          <span><b>{items.length}</b> Accounts onboarding</span>
          <span><b>{items.filter(i=>i.kind==="md").length}</b> MD</span>
          <span><b>{items.filter(i=>i.kind==="mgmt").length}</b> Management</span>
          <span><b>{items.filter(i=>i.kind==="event").length}</b> Events</span>
        </div>
      </div>

      <div className="nb-board">
        {stages.map(stage => {
          const colItems = items
            .map((it, idx) => ({ ...it, _idx: idx }))
            .filter(it => it.stage === stage.k);
          return (
            <div
              key={stage.k}
              className={"nb-col " + (overStage === stage.k ? "drag-over " : "")}
              onDragOver={(e)=>{ e.preventDefault(); setOverStage(stage.k); }}
              onDragLeave={()=>setOverStage(null)}
              onDrop={(e)=>{
                e.preventDefault();
                if(dragIdx !== null) move(dragIdx, stage.k);
                setDragIdx(null); setOverStage(null);
              }}
            >
              <div className="nb-col-head">
                <div className="nb-col-title">
                  <h3>{stage.label}</h3>
                  <span className="nb-col-count">{colItems.length}</span>
                </div>
                <span className="nb-col-sub">{stage.sub}</span>
              </div>

              <div className="nb-col-body">
                {colItems.map(it => (
                  <NewBusinessCard
                    key={it.id || it._idx}
                    item={it}
                    idx={it._idx}
                    onUpdate={(patch)=>update(it._idx, patch)}
                    onRemove={()=>remove(it._idx)}
                    onMove={(s)=>move(it._idx, s)}
                    onOpen={()=>onOpenClient && onOpenClient({
                      name: it.company, segment: it.kind === "mgmt" ? "mgmt" : it.kind === "event" ? "event" : "md",
                    })}
                    stages={stages}
                    segmentOptions={segmentOptions}
                    kindFromSegment={kindFromSegment}
                    onDragStart={()=>setDragIdx(it._idx)}
                    onDragEnd={()=>{ setDragIdx(null); setOverStage(null); }}
                  />
                ))}
                <button className="nb-add" onClick={()=>add(stage.k)}>
                  <Icon.Plus/> Add account
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function NewBusinessCard({ item, idx, onUpdate, onRemove, onMove, onOpen, stages, segmentOptions, kindFromSegment, onDragStart, onDragEnd }){
  const [confirmDel, setConfirmDel] = React.useState(false);

  const kindBadge = item.kind === "md" ? "MD" : item.kind === "mgmt" ? "MGMT" : "EVENT";
  const kindClass = "kind-" + item.kind;

  return (
    <div
      className={"nb-card " + kindClass}
      draggable
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
    >
      <div className="nb-card-head">
        <div className="nb-card-logo" style={{ background: item.logoBg }}>
          {item.logoLetter || (item.company || "?")[0]}
        </div>
        <div className="nb-card-title">
          <b>
            <EditableText
              value={item.company}
              onSave={(v)=>onUpdate({ company: v })}
              placeholder="Company"
            />
          </b>
          <span className={"nb-kind-badge " + kindClass}>
            <EditableSelect
              value={item.segment}
              options={segmentOptions}
              onSave={(v)=>onUpdate({ segment: v, kind: kindFromSegment(v) })}
            />
          </span>
        </div>
        <div className="inline-row-actions nb-card-actions">
          <button title="Open full drawer" onClick={onOpen}><Icon.ArrowRight/></button>
          {!confirmDel ? (
            <button title="Delete" onClick={()=>setConfirmDel(true)}><Icon.Trash/></button>
          ) : (
            <React.Fragment>
              <button title="Confirm delete" className="confirm-del" onClick={onRemove}><Icon.Check/></button>
              <button title="Cancel" onClick={()=>setConfirmDel(false)}><Icon.Close/></button>
            </React.Fragment>
          )}
        </div>
      </div>

      <div className="nb-card-value">
        <EditableText
          value={item.value}
          onSave={(v)=>onUpdate({ value: v })}
          placeholder="Value"
        />
        {item.valueNote !== undefined && (
          <span className="nb-card-value-note">
            <EditableText
              value={item.valueNote}
              onSave={(v)=>onUpdate({ valueNote: v })}
              placeholder="(headcount / scope)"
            />
          </span>
        )}
      </div>

      <div className="nb-card-row">
        <span className="nb-card-label">Owner</span>
        <div className="nb-card-owner">
          <span className="nb-owner-av">{item.ownerInitials || (item.owner||"?").split(" ").map(w=>w[0]).slice(0,2).join("")}</span>
          <EditableText
            value={item.owner}
            onSave={(v)=>{
              const initials = v.split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
              onUpdate({ owner: v, ownerInitials: initials });
            }}
          />
        </div>
      </div>

      <div className="nb-card-row">
        <span className="nb-card-label">Next step</span>
        <EditableText
          value={item.nextStep}
          onSave={(v)=>onUpdate({ nextStep: v })}
          placeholder="What's next?"
          className="nb-card-text"
        />
      </div>

      <div className="nb-card-foot">
        <span className="nb-last-touch">{item.lastTouch}</span>
        <select
          className="nb-stage-pick"
          value={item.stage}
          onChange={(e)=>onMove(e.target.value)}
          title="Move to stage"
          onClick={(e)=>e.stopPropagation()}
        >
          {stages.map(s => <option key={s.k} value={s.k}>→ {s.label}</option>)}
        </select>
      </div>
    </div>
  );
}

Object.assign(window, { NewBusinessPipeline });