// =========================================================================
// PIPELINE — 3 variantes
// =========================================================================

const PhaseStepHeader = ({ activePhase, onSelect }) => {
  const { DATA } = window;
  return (
    <div className="pl-steps">
      {DATA.PHASES.map((p, i) => {
        const cnt = DATA.PHASE_COUNTS[p.key];
        const isActive = activePhase === p.key;
        const isDone = activePhase && DATA.PHASES.findIndex(x => x.key === activePhase) > i;
        return (
          <div
            key={p.key}
            className={"pl-step" + (isActive ? " active" : "") + (isDone ? " done" : "")}
            onClick={() => onSelect(p.key)}
          >
            <div className="pl-step-num">{p.num}</div>
            <div className="pl-step-lbl">{p.short}</div>
            <div className="pl-step-count">{cnt} inmuebles</div>
          </div>
        );
      })}
    </div>
  );
};

// Group properties by phase
const groupByPhase = (props) => {
  const groups = {};
  window.DATA.PHASES.forEach(p => groups[p.key] = []);
  props.forEach(pr => { if (groups[pr.phase]) groups[pr.phase].push(pr); });
  return groups;
};

// ---------- VARIANT A — Kanban horizontal (9 columnas con scroll) ----------
const PipelineA = ({ onOpenProperty }) => {
  const { Icons, DATA, PageHeader, fmtEUR } = window;
  const groups = groupByPhase(DATA.INMUEBLES);
  return (
    <>
      <PageHeader
        eyebrow="Playbook REVIN · 9 fases"
        title="PIPELINE"
        sub="Arrastra inmuebles entre fases. Cada paso dispara su checklist obligatorio."
        actions={<>
          <div className="view-tabs">
            <button className="active"><Icons.Grid/> Kanban</button>
            <button><Icons.List/> Timeline</button>
          </div>
          <button className="btn primary" onClick={() => window.RevinNav?.crearInmueble?.()}><Icons.Plus/> Crear inmueble</button>
        </>}
      />
      <div className="kb">
        {DATA.PHASES.map(phase => (
          <div className="kb-col" key={phase.key}>
            <div className="kb-h">
              <div className="kb-name"><span className="num">{phase.num}</span>{phase.short}</div>
              <div className="kb-count">{groups[phase.key].length}</div>
            </div>
            <div className="kb-body">
              {groups[phase.key].map(pr => (
                <div className={"kb-card" + (pr.cooling ? " cooling" : "")} key={pr.id} onClick={() => onOpenProperty(pr.id)}>
                  <div className="kb-card-h">
                    <div className="kb-addr">{pr.addr}</div>
                  </div>
                  <div className="kb-code">{pr.id}</div>
                  <div className="kb-sub" style={{marginTop: 4}}>
                    <Pill tone="neutral">{pr.type}</Pill>
                    <span>{pr.town}</span>
                  </div>
                  <div className="kb-foot">
                    <div className="kb-price">{fmtEUR(pr.price)}</div>
                    <div className="kb-ava">{pr.comercializador}</div>
                  </div>
                </div>
              ))}
              {groups[phase.key].length === 0 && (
                <div style={{fontSize: 11, color: "var(--fg-4)", textAlign: "center", padding: 20}}>—</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

// ---------- VARIANT B — Stepper horizontal + drill-down con checklist ----------
const PipelineB = ({ onOpenProperty }) => {
  const { Icons, DATA, PageHeader, fmtEUR, Card } = window;
  const [active, setActive] = React.useState("clientes");
  const inPhase = DATA.INMUEBLES.filter(p => p.phase === active);
  const checklist = DATA.CHECKLISTS_BY_PHASE[active] || [];
  const phaseObj = DATA.PHASES.find(p => p.key === active);

  return (
    <>
      <PageHeader
        eyebrow="Playbook REVIN · 9 fases"
        title="PIPELINE · POR FASE"
        sub="Selecciona una fase para ver inmuebles, checklist y acciones."
        actions={<>
          <div className="view-tabs">
            <button><Icons.Grid/> Kanban</button>
            <button className="active"><Icons.List/> Timeline</button>
          </div>
          <button className="btn primary" onClick={() => window.RevinNav?.crearInmueble?.()}><Icons.Plus/> Crear inmueble</button>
        </>}
      />
      <PhaseStepHeader activePhase={active} onSelect={setActive}/>

      <div style={{display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20}}>
        <Card
          title={`Inmuebles en fase: ${phaseObj.label} · ${inPhase.length}`}
          right={<button className="btn xs ghost"><Icons.MoreH/></button>}
          b={false}
        >
          {inPhase.length === 0 ? (
            <div className="empty">
              <div className="icon-wrap"><Icons.Building/></div>
              No hay inmuebles en esta fase ahora mismo.
            </div>
          ) : (
            <table className="tbl">
              <thead><tr><th>Dirección</th><th>Tipo</th><th>Días</th><th className="num">Precio</th><th>Comercial</th></tr></thead>
              <tbody>
                {inPhase.map(pr => (
                  <tr key={pr.id} onClick={() => onOpenProperty(pr.id)}>
                    <td>
                      <div style={{fontWeight: 600}}>{pr.addr}</div>
                      <div className="code">{pr.id}</div>
                    </td>
                    <td><Pill tone="neutral">{pr.type}</Pill></td>
                    <td>{pr.days}d {pr.cooling && <Pill tone="danger">FRÍO</Pill>}</td>
                    <td className="num">{fmtEUR(pr.price)}</td>
                    <td><div className="kb-ava" style={{display: "inline-flex"}}>{pr.comercializador}</div></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </Card>

        <div className="pl-checklist">
          {/* B2 — PLANTILLA de la fase, no estado por inmueble. Sale del catálogo
              `checklist_playbook`. Antes venía del mock CON `done: true` en varios
              ítems: cada fase mostraba pasos dados por completados que nadie había
              completado, en un proceso con arras y notaría. Quién completa qué se
              diseña junto al avance de fase; hasta entonces, ningún check. */}
          <h3>Checklist de la fase</h3>
          <div className="ck-sub">
            Plantilla del playbook para esta fase. Todavía no se marca por inmueble.
          </div>
          {checklist.length === 0 ? (
            <div style={{fontSize: 12.5, color: "var(--fg-3)", padding: "12px 0", lineHeight: 1.5}}>
              Esta fase aún no tiene checklist definido.
            </div>
          ) : checklist.map((c, i) => (
            <div className={"pl-check-row" + (c.req ? " req" : "")} key={i}>
              <div className="chk"/>
              <div className="label">{c.label}</div>
              {c.req && <div className="meta">Obligatorio</div>}
            </div>
          ))}
          <button className="btn primary" style={{marginTop: 16, width: "100%", justifyContent: "center"}}>
            <Icons.ArrowRight/> Avanzar a siguiente fase
          </button>
        </div>
      </div>
    </>
  );
};

// ---------- VARIANT C — Timeline vertical (vista única) ----------
const PipelineC = ({ onOpenProperty }) => {
  const { Icons, DATA, PageHeader, fmtEUR } = window;
  const sample = DATA.INMUEBLES[0]; // foco en un inmueble como ejemplo
  const activeIdx = DATA.PHASES.findIndex(p => p.key === sample.phase);

  return (
    <>
      <PageHeader
        eyebrow={`Inmueble enfocado · ${sample.id}`}
        title={(sample.addr || "—").toUpperCase()}
        sub={`${sample.town} · ${sample.type} · ${fmtEUR(sample.price)} de compra → ${fmtEUR(sample.target)} objetivo`}
        actions={<>
          <button className="btn secondary" onClick={() => onOpenProperty(sample.id)}><Icons.Eye/> Ver ficha completa</button>
          <button className="btn primary"><Icons.ArrowRight/> Avanzar fase</button>
        </>}
      />
      <div className="pl-timeline">
        {DATA.PHASES.map((phase, i) => {
          const isDone = i < activeIdx;
          const isActive = i === activeIdx;
          const checklist = DATA.CHECKLISTS_BY_PHASE[phase.key] || [];
          return (
            <div className={"pl-tl-row" + (isDone ? " done" : "") + (isActive ? " active" : "")} key={phase.key}>
              <div className="pl-tl-num">{isDone ? "✓" : phase.num}</div>
              <div className="pl-tl-body">
                <div className="pl-tl-h">
                  <div className="pl-tl-title">{phase.label}</div>
                  <div className="pl-tl-meta">
                    {isDone && "Completada"}
                    {isActive && <Pill tone="danger">En curso</Pill>}
                    {!isDone && !isActive && "Pendiente"}
                  </div>
                </div>
                {checklist.length > 0 && (isActive || isDone) && (
                  <div className="pl-tl-items">
                    {/* Sin check: `c.done || isDone` daba por completados TODOS los
                        ítems de las fases anteriores. Que el inmueble haya pasado de
                        fase no consta que se hiciera cada paso — es una deducción, y
                        se pintaba como un hecho. */}
                    {checklist.map((c, j) => (
                      <span key={j} className="pl-tl-chip">{c.label}</span>
                    ))}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

window.PipelineA = PipelineA;
window.PipelineB = PipelineB;
window.PipelineC = PipelineC;