// Inbox view — pending items to classify

const InboxView = ({ inbox, setInbox, projects, setProjects }) => {
  const toast = window.useToast();
  const [creating, setCreating] = React.useState(false);
  const [assigning, setAssigning] = React.useState(null); // { itemId }

  const tagClass = (tipo) => "tag t-" + tipo;
  const tagLabel = { proyecto: "Proyecto", epic: "Epic", actividad: "Actividad", idea: "Idea" };

  const onDelete = (id) => {
    setInbox((prev) => prev.filter((x) => x.id !== id));
    toast.push("Item eliminado del Inbox", { color: "var(--rojo-suave)", icon: "close" });
  };

  const onPromote = (item) => {
    setAssigning(item);
  };

  const doAssign = (destination) => {
    const item = assigning;
    if (!item) return;
    if (item.tipo === "proyecto") {
      const newProj = {
        id: "p-" + Math.random().toString(36).slice(2, 8),
        name: item.nombre,
        area: item.area,
        tipo: "quickwin",
        status: "backlog",
        color: "#A78BFA",
        notas: item.notas || "",
        epics: [],
      };
      setProjects((prev) => [...prev, newProj]);
    } else if (item.tipo === "epic") {
      const newEpic = {
        id: "e-" + Math.random().toString(36).slice(2, 8),
        name: item.nombre,
        status: "backlog",
        start: "2026-06-01", end: "2026-08-31", tbd: true,
        notas: item.notas || "",
        userStories: [],
      };
      setProjects((prev) => prev.map((p) => p.id !== destination.projectId ? p : { ...p, epics: [...p.epics, newEpic] }));
    } else {
      // idea / actividad → US in selected epic
      const newUs = {
        id: "us-" + Math.random().toString(36).slice(2, 8),
        name: item.nombre,
        status: "backlog",
        notas: item.notas || "",
      };
      setProjects((prev) => prev.map((p) => p.id !== destination.projectId ? p : {
        ...p,
        epics: p.epics.map((e) => e.id !== destination.epicId ? e : { ...e, userStories: [...e.userStories, newUs] }),
      }));
    }
    setInbox((prev) => prev.filter((x) => x.id !== item.id));
    setAssigning(null);
    toast.push(`✓ ${item.nombre} promovido al árbol`, { color: "var(--verde)", icon: "arrowUp" });
  };

  return (
    <>
      <div className="view-header">
        <div>
          <div className="view-title">Inbox</div>
          <div className="view-sub">{inbox.length} items pendientes de clasificar · ideas, epics y proyectos sin asignar</div>
        </div>
        <button className="btn-primary" onClick={() => setCreating(true)}>
          <Icon name="plus" size={12} /> Agregar al Inbox
        </button>
      </div>

      <div className="inbox-panel">
        <div className="inbox-toolbar">
          <div style={{ fontSize: 11, color: "var(--text-2)" }}>
            Tip: usa <kbd style={{ fontFamily: "var(--font-mono)", fontSize: 9, background: "#0F1115", border: "1px solid var(--border-default)", padding: "1px 5px", borderRadius: 3 }}>↑</kbd> para promover un item al árbol de proyectos.
          </div>
          <div style={{ display: "flex", gap: 14, fontSize: 10, color: "var(--text-2)" }}>
            <span className="row gap-sm"><span className="tag t-proyecto">Proyecto</span> {inbox.filter((i) => i.tipo === "proyecto").length}</span>
            <span className="row gap-sm"><span className="tag t-epic">Epic</span> {inbox.filter((i) => i.tipo === "epic").length}</span>
            <span className="row gap-sm"><span className="tag t-idea">Idea</span> {inbox.filter((i) => i.tipo === "idea").length}</span>
          </div>
        </div>
        <div className="inbox-table">
          <div className="th">Tipo</div>
          <div className="th">Nombre</div>
          <div className="th">Área</div>
          <div className="th" style={{ textAlign: "right" }}>Acciones</div>

          {inbox.length === 0 && <div className="inbox-empty">Inbox vacío · todo procesado ✓</div>}

          {inbox.map((item) => (
            <div key={item.id} className="group" style={{ display: "contents" }}>
              <div className="row-cell"><span className={tagClass(item.tipo)}>{tagLabel[item.tipo] || item.tipo}</span></div>
              <div className="row-cell">
                <div className="row-name">
                  <div className="nm">{item.nombre}</div>
                  {item.notas && <div className="note">{item.notas}</div>}
                </div>
              </div>
              <div className="row-cell" style={{ fontSize: 10, color: "var(--text-2)", fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4 }}>
                {item.area}
              </div>
              <div className="row-cell">
                <div className="inbox-actions">
                  <button className="icon-btn assign" title="Promover al árbol" onClick={() => onPromote(item)}><Icon name="arrowUp" size={13} /></button>
                  <button className="icon-btn del" title="Eliminar" onClick={() => onDelete(item.id)}><Icon name="close" size={13} /></button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {creating && (
        <CreateInboxModal
          onClose={() => setCreating(false)}
          onCreate={(data) => {
            setInbox((prev) => [...prev, { ...data, id: "i-" + Math.random().toString(36).slice(2, 8) }]);
            setCreating(false);
            toast.push("Item agregado al Inbox");
          }}
        />
      )}

      {assigning && (
        <AssignModal
          item={assigning}
          projects={projects}
          onClose={() => setAssigning(null)}
          onAssign={doAssign}
        />
      )}
    </>
  );
};

const CreateInboxModal = ({ onClose, onCreate }) => {
  const [d, setD] = React.useState({ tipo: "idea", nombre: "", area: "Transversal", notas: "" });
  return (
    <Modal title="Nuevo item de Inbox" onClose={onClose}
      footer={<>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" disabled={!d.nombre.trim()} onClick={() => onCreate(d)}>Guardar</button>
      </>}>
      <div className="field"><label>Tipo</label>
        <select value={d.tipo} onChange={(e) => setD({ ...d, tipo: e.target.value })}>
          <option value="idea">Idea</option>
          <option value="actividad">Actividad / US</option>
          <option value="epic">Epic</option>
          <option value="proyecto">Proyecto</option>
        </select>
      </div>
      <div className="field"><label>Nombre</label>
        <input type="text" autoFocus value={d.nombre} onChange={(e) => setD({ ...d, nombre: e.target.value })} placeholder="Nombre descriptivo del item…" />
      </div>
      <div className="field"><label>Área</label>
        <select value={d.area} onChange={(e) => setD({ ...d, area: e.target.value })}>
          {window.AREAS.map((a) => <option key={a} value={a}>{a}</option>)}
        </select>
      </div>
      <div className="field"><label>Notas</label>
        <textarea value={d.notas} onChange={(e) => setD({ ...d, notas: e.target.value })} placeholder="Contexto, owner, dependencias…" />
      </div>
    </Modal>
  );
};

const AssignModal = ({ item, projects, onClose, onAssign }) => {
  const [projectId, setProjectId] = React.useState(projects[0]?.id || "");
  const [epicId, setEpicId] = React.useState(projects[0]?.epics?.[0]?.id || "");
  const project = projects.find((p) => p.id === projectId);
  React.useEffect(() => { setEpicId(project?.epics?.[0]?.id || ""); }, [projectId]);

  const needsEpic = item.tipo !== "proyecto" && item.tipo !== "epic";
  return (
    <Modal title={`Promover "${item.nombre}" al árbol`} onClose={onClose}
      footer={<>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" onClick={() => onAssign({ projectId, epicId })}>Promover</button>
      </>}>
      <div style={{ fontSize: 11, color: "var(--text-2)", marginBottom: 4 }}>
        Este item entrará al árbol como{" "}
        <span style={{ color: "var(--text-1)", fontWeight: 600 }}>{item.tipo === "proyecto" ? "nuevo proyecto" : item.tipo === "epic" ? "epic dentro del proyecto seleccionado" : "actividad dentro del epic seleccionado"}</span>.
      </div>
      {item.tipo !== "proyecto" && (
        <div className="field"><label>Proyecto destino</label>
          <select value={projectId} onChange={(e) => setProjectId(e.target.value)}>
            {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </div>
      )}
      {needsEpic && (
        <div className="field"><label>Epic destino</label>
          <select value={epicId} onChange={(e) => setEpicId(e.target.value)}>
            {(project?.epics || []).map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
          </select>
        </div>
      )}
    </Modal>
  );
};

Object.assign(window, { InboxView, CreateInboxModal, AssignModal });