/* ============ MAKI — Tablero Kanban por estado ============ */

function OrderCard({ order, onOpen, onDragStart, onDragEnd, dragging }) {
  const [h, setH] = useState(false);
  const itemsCount = order.items.reduce((s, i) => s + i.qty, 0);
  return (
    <div draggable
      onDragStart={(e) => { onDragStart(order); e.dataTransfer.effectAllowed = "move"; }}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(order)}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: cv("--surface"), border: `1px solid ${h ? cv("--line-2") : cv("--line")}`,
        borderRadius: 13, padding: 13, cursor: "pointer", boxShadow: h ? "var(--sh-2)" : "var(--sh-1)",
        transition: "box-shadow .14s, border-color .14s, transform .08s",
        opacity: dragging ? 0.4 : 1, transform: h ? "translateY(-1px)" : "none",
      }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 9 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <ChannelTag channel={order.channel} compact />
          <span style={{ fontSize: 13, fontWeight: 800, letterSpacing: "-0.01em" }}>{order.id}</span>
        </div>
        <SlaChip min={order.slaMin} />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 10 }}>
        <Avatar name={order.client} type={order.clientType} size={30} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{order.client}</div>
          <div style={{ fontSize: 11.5, color: cv("--ink-3"), fontWeight: 600 }}>{itemsCount} ítems · {order.mode}</div>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, borderTop: `1px solid ${cv("--line")}` }}>
        <ChainTag chainId={order.chain} />
        <span style={{ fontSize: 13.5, fontWeight: 800, color: cv("--primary-700") }}>{MAKI.money(order.total)}</span>
      </div>
      {order.assignee && (
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 9, fontSize: 11.5, color: cv("--ink-2"), fontWeight: 600 }}>
          <Icon name="user" size={12} color={cv("--ink-3")} /> {order.assignee} · entrega {order.due}
        </div>
      )}
    </div>
  );
}

function Column({ state, orders, onOpen, dragApi, isOver }) {
  const sum = orders.reduce((s, o) => s + o.total, 0);
  return (
    <div
      onDragOver={(e) => { e.preventDefault(); dragApi.setOver(state.id); }}
      onDrop={(e) => { e.preventDefault(); dragApi.drop(state.id); }}
      style={{
        flex: "0 0 296px", display: "flex", flexDirection: "column",
        background: isOver ? cv(state.bg) : cv("--surface-2"),
        borderRadius: 16, border: `1px solid ${isOver ? cv(state.color) : cv("--line")}`,
        transition: "background .12s, border-color .12s", maxHeight: "100%",
      }}>
      <div style={{ padding: "13px 14px 11px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: cv(state.color), flexShrink: 0 }} />
          <span style={{ fontSize: 13.5, fontWeight: 800, whiteSpace: "nowrap" }}>{state.label}</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: cv("--ink-3"), background: cv("--surface"), borderRadius: 99, padding: "1px 8px" }}>{orders.length}</span>
        </div>
        <Icon name="dots" size={16} color={cv("--ink-3")} />
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "2px 10px 12px", display: "flex", flexDirection: "column", gap: 9 }}>
        {orders.map(o => (
          <OrderCard key={o.id} order={o} onOpen={onOpen}
            onDragStart={dragApi.start} onDragEnd={dragApi.end} dragging={dragApi.draggingId === o.id} />
        ))}
        {orders.length === 0 && (
          <div style={{ border: `1.5px dashed ${cv("--line-2")}`, borderRadius: 12, padding: "20px 10px", textAlign: "center", fontSize: 12, color: cv("--ink-3"), fontWeight: 600 }}>
            Soltá un pedido aquí
          </div>
        )}
      </div>
      <div style={{ padding: "9px 14px", borderTop: `1px solid ${cv("--line")}`, fontSize: 11.5, fontWeight: 700, color: cv("--ink-3"), display: "flex", justifyContent: "space-between" }}>
        <span>Subtotal</span><span style={{ color: cv("--ink-2") }}>{MAKI.money(sum)}</span>
      </div>
    </div>
  );
}

function BoardScreen({ orders, onOpen, onMove }) {
  const [draggingId, setDraggingId] = useState(null);
  const [over, setOver] = useState(null);
  const dragOrder = useRef(null);

  const dragApi = {
    draggingId,
    start: (o) => { dragOrder.current = o; setDraggingId(o.id); },
    end: () => { setDraggingId(null); setOver(null); dragOrder.current = null; },
    setOver: (id) => setOver(id),
    drop: (stateId) => {
      if (dragOrder.current && dragOrder.current.state !== stateId) onMove(dragOrder.current, stateId);
      setDraggingId(null); setOver(null); dragOrder.current = null;
    },
  };

  return (
    <div style={{ display: "flex", gap: 14, padding: "20px 24px", overflowX: "auto", height: "100%", alignItems: "stretch" }}>
      {MAKI.STATES.map(st => (
        <Column key={st.id} state={st} isOver={over === st.id} dragApi={dragApi}
          orders={orders.filter(o => o.state === st.id)} onOpen={onOpen} />
      ))}
    </div>
  );
}

Object.assign(window, { BoardScreen, OrderCard });