// =====================================================================
// MAESTRO — Vista Status IA (tablero pipeline con drag & drop)
// =====================================================================
const { useState: useSB, useEffect: useSBE, useMemo: useSBM, useRef: useSBR } = React;
const D_sb = window.MAESTRO_DATA;

const PIPELINE_STAGES = [
  { key: "idea",       label: "Idea",        color: "var(--fg-subtle)",  bg: "var(--bg-subtle)" },
  { key: "poc",        label: "POC",         color: "#0ea5e9",           bg: "rgba(14,165,233,.1)" },
  { key: "desarrollo", label: "Desarrollo",  color: "#f59e0b",           bg: "rgba(245,158,11,.1)" },
  { key: "testing",    label: "Testing",     color: "#a78bfa",           bg: "rgba(167,139,250,.1)" },
  { key: "produccion", label: "Producción",  color: "var(--success)",    bg: "rgba(34,197,94,.1)" },
  { key: "pausado",    label: "Pausado",     color: "var(--fg-muted)",   bg: "var(--bg-surface)" },
];

const ESTADO_COLOR = {
  "en análisis":  "var(--accent)",
  "en desarrollo":"var(--success)",
  "testing":      "var(--warning)",
  "listo":        "var(--success)",
  "producción":   "#22c55e",
};
const PRIORIDAD_COLOR = { alta: "var(--danger)", media: "var(--warning)", baja: "var(--fg-muted)" };

function ProgressBar({ total, completed }) {
  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
      <div style={{ flex: 1, height: 5, borderRadius: 99, background: "var(--bg-subtle)", overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${pct}%`, background: pct === 100 ? "var(--success)" : "var(--accent)", borderRadius: 99, transition: "width .3s" }} />
      </div>
      <span style={{ fontSize: 10, color: "var(--fg-muted)", whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums" }}>
        {completed}/{total}
      </span>
    </div>
  );
}

function StatusCard({ project, onClick, onDragStart, isDragging }) {
  const stage = PIPELINE_STAGES.find(s => s.key === (project.pipeline_stage || "idea")) || PIPELINE_STAGES[0];
  const hasBlockers = project.blockers_open > 0;
  return (
    <div
      draggable
      onDragStart={e => {
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", project.id);
        onDragStart(project.id);
      }}
      onDragEnd={() => onDragStart(null)}
      onClick={() => !isDragging && onClick(project)}
      style={{
        background: "var(--bg-surface)",
        border: "1px solid var(--border)",
        borderTop: `3px solid ${stage.color}`,
        borderRadius: "var(--r-md)",
        padding: "14px 16px",
        cursor: "grab",
        display: "flex",
        flexDirection: "column",
        gap: 10,
        opacity: isDragging ? 0.45 : 1,
        transition: "box-shadow .15s, transform .15s, opacity .15s",
        userSelect: "none",
      }}
      onMouseEnter={e => { if (!isDragging) { e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.transform = "translateY(-1px)"; }}}
      onMouseLeave={e => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.transform = "none"; }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
        <span style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.3 }}>{project.nombre}</span>
        <span style={{ fontSize: 10, fontWeight: 600, padding: "2px 7px", borderRadius: 99,
          background: PRIORIDAD_COLOR[project.prioridad] + "22",
          color: PRIORIDAD_COLOR[project.prioridad], whiteSpace: "nowrap", flexShrink: 0 }}>
          {project.prioridad}
        </span>
      </div>

      <p style={{ margin: 0, fontSize: 12, color: "var(--fg-muted)", lineHeight: 1.5,
        display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
        {project.descripcion || "Sin descripción"}
      </p>

      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 99,
          background: (ESTADO_COLOR[project.estado] || "var(--fg-muted)") + "22",
          color: ESTADO_COLOR[project.estado] || "var(--fg-muted)", fontWeight: 600 }}>
          {project.estado}
        </span>
        {hasBlockers && (
          <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 99,
            background: "var(--danger)22", color: "var(--danger)", fontWeight: 600 }}>
            {project.blockers_open} bloqueante{project.blockers_open > 1 ? "s" : ""}
          </span>
        )}
      </div>

      {project.tasks_total > 0 && (
        <ProgressBar total={project.tasks_total} completed={project.tasks_completed} />
      )}
    </div>
  );
}

function DetailModal({ project, onClose }) {
  if (!project) return null;
  const stage = PIPELINE_STAGES.find(s => s.key === (project.pipeline_stage || "idea")) || PIPELINE_STAGES[0];
  const taskPct = project.tasks_total > 0 ? Math.round((project.tasks_completed / project.tasks_total) * 100) : null;

  return (
    <div
      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.55)", display: "flex",
        alignItems: "center", justifyContent: "center", zIndex: 9999, padding: 16 }}
      onClick={e => e.target === e.currentTarget && onClose()}
    >
      <div style={{ background: "var(--bg-surface)", border: "1px solid var(--border)",
        borderRadius: "var(--r-lg)", width: "100%", maxWidth: 540,
        maxHeight: "90vh", overflow: "auto",
        borderTop: `4px solid ${stage.color}` }}>
        <div style={{ padding: "24px 28px 0" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6 }}>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>{project.nombre}</h2>
            <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer",
              color: "var(--fg-muted)", fontSize: 20, padding: "0 4px", lineHeight: 1 }}>×</button>
          </div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}>
            <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 99,
              background: stage.bg, color: stage.color, fontWeight: 600 }}>
              {stage.label}
            </span>
            <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 99,
              background: (ESTADO_COLOR[project.estado] || "var(--fg-muted)") + "22",
              color: ESTADO_COLOR[project.estado] || "var(--fg-muted)", fontWeight: 600 }}>
              {project.estado}
            </span>
            <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 99,
              background: (PRIORIDAD_COLOR[project.prioridad] || "var(--fg-muted)") + "22",
              color: PRIORIDAD_COLOR[project.prioridad] || "var(--fg-muted)", fontWeight: 600 }}>
              Prioridad {project.prioridad}
            </span>
          </div>
        </div>

        <div style={{ padding: "0 28px 24px", display: "flex", flexDirection: "column", gap: 20 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.07em",
              color: "var(--fg-subtle)", marginBottom: 8 }}>Objetivo</div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--text-primary)" }}>
              {project.descripcion || "Sin descripción registrada."}
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase",
                letterSpacing: "0.07em", color: "var(--fg-subtle)", marginBottom: 4 }}>Responsable</div>
              <div style={{ fontSize: 14 }}>{project.responsable || "—"}</div>
            </div>
            {project.deadline && (
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase",
                  letterSpacing: "0.07em", color: "var(--fg-subtle)", marginBottom: 4 }}>Deadline</div>
                <div style={{ fontSize: 14 }}>{project.deadline}</div>
              </div>
            )}
          </div>

          {project.tasks_total > 0 && (
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase",
                letterSpacing: "0.07em", color: "var(--fg-subtle)", marginBottom: 8 }}>
                Progreso de tareas ({taskPct}%)
              </div>
              <ProgressBar total={project.tasks_total} completed={project.tasks_completed} />
              <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 4 }}>
                {project.tasks_completed} completadas de {project.tasks_total} tareas
              </div>
            </div>
          )}

          {project.blockers_open > 0 && (
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase",
                letterSpacing: "0.07em", color: "var(--danger)", marginBottom: 8 }}>
                Bloqueantes activos ({project.blockers_open})
              </div>
              <div style={{ fontSize: 13, color: "var(--fg-muted)", padding: "10px 14px",
                background: "rgba(239,68,68,.08)", borderRadius: "var(--r-sm)",
                border: "1px solid rgba(239,68,68,.2)" }}>
                Hay {project.blockers_open} impedimento{project.blockers_open > 1 ? "s" : ""} activo{project.blockers_open > 1 ? "s" : ""} en este proyecto.
              </div>
            </div>
          )}

          {project.tags && (
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase",
                letterSpacing: "0.07em", color: "var(--fg-subtle)", marginBottom: 8 }}>Tags</div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {project.tags.split(",").map(t => t.trim()).filter(Boolean).map(t => (
                  <span key={t} style={{ fontSize: 11, padding: "2px 8px", borderRadius: 99,
                    background: "var(--accent-soft)", color: "var(--accent)" }}>{t}</span>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function StatusBoard() {
  const [projects, setProjects] = useSB([]);
  const [loading, setLoading] = useSB(true);
  const [error, setError] = useSB(null);
  const [selectedProject, setSelectedProject] = useSB(null);
  const [lastUpdated, setLastUpdated] = useSB(null);
  const [draggingId, setDraggingId] = useSB(null);
  const [dragOverStage, setDragOverStage] = useSB(null);

  useSBE(() => { loadProjects(); }, []);

  async function loadProjects() {
    setLoading(true);
    setError(null);
    try {
      const data = await D_sb.API.apiFetch("/status/projects");
      setProjects(data);
      setLastUpdated(new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }));
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }

  async function moveTo(projectId, newStage) {
    const project = projects.find(p => p.id === projectId);
    if (!project || project.pipeline_stage === newStage) return;

    // Optimistic update
    setProjects(ps => ps.map(p => p.id === projectId ? { ...p, pipeline_stage: newStage } : p));

    try {
      await D_sb.API.apiFetch(`/projects/${projectId}`, {
        method: "PATCH",
        body: JSON.stringify({ pipeline_stage: newStage }),
      });
    } catch (e) {
      // Revert on error
      setProjects(ps => ps.map(p => p.id === projectId ? { ...p, pipeline_stage: project.pipeline_stage } : p));
    }
  }

  const grouped = useSBM(() => {
    const g = {};
    PIPELINE_STAGES.forEach(s => g[s.key] = []);
    projects.forEach(p => {
      const key = p.pipeline_stage || "idea";
      if (g[key]) g[key].push(p);
      else g["idea"].push(p);
    });
    return g;
  }, [projects]);

  if (loading) {
    return (
      <section className="section">
        <div style={{ padding: 60, textAlign: "center", color: "var(--fg-muted)" }}>
          Cargando tablero…
        </div>
      </section>
    );
  }

  if (error) {
    return (
      <section className="section">
        <div style={{ padding: 40, textAlign: "center", color: "var(--danger)" }}>
          Error al cargar: {error}
          <br />
          <button className="btn btn-ghost" style={{ marginTop: 12 }} onClick={loadProjects}>
            Reintentar
          </button>
        </div>
      </section>
    );
  }

  return (
    <section className="section">
      {selectedProject && (
        <DetailModal project={selectedProject} onClose={() => setSelectedProject(null)} />
      )}

      <div className="section-head">
        <div>
          <div className="section-eyebrow">Status IA</div>
          <h1 className="section-title">Pipeline de proyectos</h1>
          <p className="section-subtitle">
            {projects.length} proyecto{projects.length !== 1 ? "s" : ""} · actualizado {lastUpdated}
          </p>
        </div>
        <button className="btn btn-ghost" onClick={loadProjects}>
          Actualizar
        </button>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: `repeat(${PIPELINE_STAGES.length}, minmax(220px, 1fr))`,
        gap: 16,
        overflowX: "auto",
        paddingBottom: 8,
      }}>
        {PIPELINE_STAGES.map(stage => {
          const stageProjects = grouped[stage.key] || [];
          const isOver = dragOverStage === stage.key;
          return (
            <div
              key={stage.key}
              style={{ minWidth: 0 }}
              onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setDragOverStage(stage.key); }}
              onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOverStage(null); }}
              onDrop={e => {
                e.preventDefault();
                const id = e.dataTransfer.getData("text/plain");
                if (id) moveTo(id, stage.key);
                setDragOverStage(null);
                setDraggingId(null);
              }}
            >
              {/* Column header */}
              <div style={{
                display: "flex", alignItems: "center", gap: 8, marginBottom: 12,
                padding: "8px 12px", borderRadius: "var(--r-sm)",
                background: isOver ? stage.color + "30" : stage.bg,
                border: isOver ? `2px solid ${stage.color}` : "2px solid transparent",
                transition: "background .15s, border .15s",
              }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: stage.color, flexShrink: 0 }} />
                <span style={{ fontWeight: 700, fontSize: 12, textTransform: "uppercase",
                  letterSpacing: "0.06em", color: stage.color }}>
                  {stage.label}
                </span>
                <span style={{ marginLeft: "auto", fontSize: 11, fontWeight: 600,
                  color: stage.color, opacity: .7 }}>
                  {stageProjects.length}
                </span>
              </div>

              {/* Drop zone + cards */}
              <div style={{
                display: "flex", flexDirection: "column", gap: 10,
                minHeight: 60,
                borderRadius: "var(--r-sm)",
                padding: isOver ? "6px" : "0",
                background: isOver ? stage.color + "08" : "transparent",
                border: isOver ? `1px dashed ${stage.color}` : "1px dashed transparent",
                transition: "all .15s",
              }}>
                {stageProjects.map(p => (
                  <StatusCard
                    key={p.id}
                    project={p}
                    onClick={setSelectedProject}
                    onDragStart={setDraggingId}
                    isDragging={draggingId === p.id}
                  />
                ))}
                {stageProjects.length === 0 && (
                  <div style={{ padding: "16px 12px", fontSize: 12, color: isOver ? stage.color : "var(--fg-subtle)",
                    textAlign: "center", borderRadius: "var(--r-sm)",
                    border: `1px dashed ${isOver ? stage.color : "var(--border)"}`,
                    transition: "all .15s",
                  }}>
                    {isOver ? "Soltar aquí" : "Sin proyectos"}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.MAESTRO_STATUS = { StatusBoard };