// Kanban view
function KanbanView({ leads, stages, agents, onOpen, onUpdateLead }) {
  const byStage = stages.map(s => ({
    ...s,
    leads: leads.filter(l => l.stageId === s.id),
  }));
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: `repeat(${stages.length}, 1fr)`,
      gap: 12,
      padding: 18,
      background: "#FBFBFA",
      minHeight: 600,
    }}>
      {byStage.map(col => {
        const total = col.leads.reduce((s, l) => s + l.amount, 0);
        return (
          <div key={col.id} style={{
            background: "#fff",
            border: "1px solid #ECECEA",
            borderRadius: 10,
            padding: 10,
            display: "flex", flexDirection: "column", gap: 8,
            minWidth: 0,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 6px 8px", borderBottom: "1px solid #F2F2F0" }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: col.color }} />
              <span style={{ fontSize: 12.5, fontWeight: 500, color: "#1F2433" }}>{col.label}</span>
              <span style={{ fontSize: 11, color: "#9CA3AF", background: "#F3F3F1", padding: "1px 7px", borderRadius: 999 }}>{col.leads.length}</span>
              <span style={{ marginLeft: "auto", fontSize: 11, color: "#6B7280", fontVariantNumeric: "tabular-nums" }}>{formatINR(total)}</span>
            </div>
            {col.leads.length === 0 && (
              <div style={{ padding: "24px 8px", textAlign: "center", fontSize: 11.5, color: "#C4C4C4", border: "1px dashed #ECECEA", borderRadius: 8 }}>
                Empty
              </div>
            )}
            {col.leads.map(lead => (
              <KanbanCard key={lead.id} lead={lead} agent={agents[lead.agentId]} stage={col}
                onClick={() => onOpen(lead.id)} hideAgent={false} />
            ))}
          </div>
        );
      })}
    </div>
  );
}

function KanbanCard({ lead, agent, stage, onClick, hideAgent }) {
  const initials = lead.borrower.split(" ").map(w => w[0]).slice(0,2).join("");
  const borrowerColor = ["#5684CC","#A78BC7","#4FA8A5","#6BAE5B","#D49A3A"][lead.id % 5];
  return (
    <div onClick={onClick} style={{
      background: "#fff",
      border: "1px solid " + (lead.pinned ? "#C7E5B3" : "#ECECEA"),
      borderRadius: 8,
      padding: 11,
      cursor: "pointer",
      display: "flex", flexDirection: "column", gap: 9,
      transition: "border-color 120ms ease, transform 120ms ease",
      position: "relative",
    }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#A3E494"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = lead.pinned ? "#C7E5B3" : "#ECECEA"; }}
    >
      {lead.pinned && (
        <span style={{ position: "absolute", top: 8, right: 8, color: "#6BAE5B" }}><Icons.pin size={10} /></span>
      )}
      <div style={{ display: "flex", gap: 9, alignItems: "center", minWidth: 0 }}>
        <Avatar initials={initials} color={borrowerColor} size={28} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: "#1F2433", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{lead.borrower}</div>
          <div style={{ fontSize: 11, color: "#6B7280", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{lead.business}</div>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 13.5, fontWeight: 600, color: "#1F2433", fontVariantNumeric: "tabular-nums", letterSpacing: -0.2 }}>{formatINR(lead.amount)}</span>
        <span style={{ fontSize: 10.5, color: "#9CA3AF" }}>{lead.lastActivity}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 8, borderTop: "1px solid #F2F2F0" }}>
        <span style={{ fontSize: 10.5, color: "#6B7280" }}>{lead.sector}</span>
        {!hideAgent && <Avatar initials={agent.initials} color={agent.color} size={20} />}
        {lead.awaiting && (
          <span className="pulseDot" style={{ width: 7, height: 7, borderRadius: 999, background: "#D49A3A" }} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { KanbanView });