function RightPanel({ clients: _clients, onOpenClient, tasks, onToggleTask, onAddTask }) {
  const src = _clients || CLIENTS;
  const upcoming    = getUpcomingCalls();
  const overdueCount = src.filter(c => c.overdue).length;
  const [newTask, setNewTask]     = React.useState("");
  const [collapsed, setCollapsed] = React.useState(false);
  const [activeWidget, setActiveWidget] = React.useState("tasks");
  const allTasks = tasks || [];
  const doneTasks = allTasks.filter(t => t.done).length;

  const activity = [
    { color:"#27a644", text:"Sunrise Landscaping deployed",            time:"23m ago",   id:"GMA-0055" },
    { color:"#bb87fc", text:"Clear Cut Lawn Care moved to Contacted",  time:"1h ago",    id:"GMA-0044" },
    { color:"#eb7235", text:"Beacon Plumbing counter-offered $175/mo", time:"3h ago",    id:"GMA-0029" },
    { color:"#3bbdb1", text:"Peak Pressure Washing · $200 received",   time:"yesterday", id:"GMA-0011" },
    { color:"#eb5757", text:"Elite Auto Detail call overdue",           time:"yesterday", id:"GMA-0059" },
    { color:"#f2994a", text:"Build batch complete · 3 sites ready",    time:"2d ago",    id:null       },
  ];

  function handleAddTask(e) {
    if (e.key === "Enter" && newTask.trim()) {
      if (onAddTask) onAddTask(newTask.trim());
      setNewTask("");
    }
  }

  const tabs = [
    { w:"tasks",    icon:"check-square", tip:"Tasks"    },
    { w:"calls",    icon:"phone",        tip:"Calls"    },
    { w:"activity", icon:"activity",     tip:"Activity" },
  ];

  if (collapsed) {
    return (
      <aside className="cm-right cm-right--collapsed">
        <button className="cm-iconbtn cm-right__collapseBtn" title="Expand panel" onClick={() => setCollapsed(false)}>
          <i data-lucide="panel-right-open" className="cm-icon-sm"></i>
        </button>
        <div className="cm-right__collapsedIcons">
          {tabs.map(it => (
            <button key={it.w} title={it.tip} className={"cm-iconbtn " + (activeWidget===it.w ? "is-active" : "")}
              onClick={() => { setActiveWidget(it.w); setCollapsed(false); }}>
              <i data-lucide={it.icon} className="cm-icon-sm"></i>
            </button>
          ))}
        </div>
        {overdueCount > 0 && (
          <div className="cm-right__collapsedBadge">{overdueCount}</div>
        )}
      </aside>
    );
  }

  return (
    <aside className="cm-right">
      <div className="cm-right__hdr">
        <div className="cm-right__tabs">
          {tabs.map(it => (
            <button key={it.w} title={it.tip}
              className={"cm-iconbtn cm-right__tabBtn " + (activeWidget===it.w ? "is-active" : "")}
              onClick={() => setActiveWidget(it.w)}>
              <i data-lucide={it.icon} className="cm-icon-sm"></i>
            </button>
          ))}
        </div>
        <button className="cm-iconbtn" title="Collapse panel" onClick={() => setCollapsed(true)}>
          <i data-lucide="panel-right-close" className="cm-icon-sm"></i>
        </button>
      </div>

      {activeWidget === "tasks" && (
        <div className="cm-right__widget">
          <div className="cm-right__section">
            <div className="cm-right__h" style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
              Tasks
              <span style={{ fontSize:11, color:"var(--color-ink-subtle)", textTransform:"none", letterSpacing:0 }}>{doneTasks}/{allTasks.length} done</span>
            </div>
            <div className="cm-right__card">
              {allTasks.map(t => (
                <div key={t.id} onClick={() => onToggleTask && onToggleTask(t.id)}
                  style={{ display:"flex", alignItems:"flex-start", gap:8, fontSize:12.5,
                    color: t.done ? "var(--color-ink-tertiary)" : "var(--color-ink-muted)",
                    textDecoration: t.done ? "line-through" : "none",
                    padding:"4px 0", cursor:"pointer", userSelect:"none",
                    transition:"color 150ms ease, opacity 150ms ease",
                    opacity: t.done ? 0.5 : 1,
                  }}>
                  <i data-lucide={t.done ? "check-square" : "square"} className="cm-icon-xs"
                    style={{ color: t.done ? "#6dd28a" : "var(--color-ink-subtle)", flexShrink:0, marginTop:1 }}></i>
                  {t.t}
                </div>
              ))}
              {allTasks.length === 0 && <span style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>No tasks. Add one below.</span>}
              <input
                placeholder="Add task… (Enter)"
                value={newTask}
                onChange={e => setNewTask(e.target.value)}
                onKeyDown={handleAddTask}
                style={{ width:"100%", background:"transparent", border:"none",
                  borderTop:"1px solid var(--color-hairline)", outline:"none",
                  fontSize:12, color:"var(--color-ink-muted)", paddingTop:8, marginTop:4,
                  fontFamily:"var(--font-text)" }}
              />
            </div>
          </div>
        </div>
      )}

      {activeWidget === "calls" && (
        <div className="cm-right__widget">
          <div className="cm-right__section">
            <div className="cm-right__h">Upcoming calls</div>
            <div className="cm-right__card" style={{ gap:0 }}>
              {upcoming.map(c => (
                <div key={c.id} className="cm-right__callRow" onClick={() => onOpenClient && onOpenClient(c.id)}
                  style={{ cursor:"pointer", padding:"8px 0", borderBottom:"1px solid var(--color-hairline)" }}>
                  <span className="cm-side__dot" style={{ background: stageColor(c.stage), flexShrink:0 }} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div className="cm-right__callName">{c.name}</div>
                    <div style={{ fontSize:11, color:"var(--color-ink-subtle)" }}>{c.city?.split(",")[0]}</div>
                  </div>
                  <span className={"cm-right__callDate " + (c.overdue ? "is-overdue" : "")}>
                    {c.overdue ? "Overdue" : c.nextCall}
                  </span>
                </div>
              ))}
              {upcoming.length === 0 && <span style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>No calls scheduled.</span>}
            </div>
          </div>
          <div className="cm-right__section">
            <div className="cm-right__h">Pipeline snapshot</div>
            <div className="cm-right__card">
              {[
                ["Calls scheduled", upcoming.filter(c => !c.overdue).length, "var(--color-ink)"],
                ["Overdue",         overdueCount,                             "#f08585"],
                ["Awaiting build",  src.filter(c => c.stage === "targeted").length, "var(--color-ink)"],
                ["Ready to deploy", src.filter(c => c.stage === "built" && !c.deployed).length, "var(--color-ink)"],
              ].map(([label, val, color]) => (
                <div key={label} style={{ display:"flex", justifyContent:"space-between", fontSize:12, color:"var(--color-ink-muted)", padding:"2px 0" }}>
                  <span>{label}</span><span style={{ color }}>{val}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {activeWidget === "activity" && (
        <div className="cm-right__widget">
          <div className="cm-right__section">
            <div className="cm-right__h">Recent activity</div>
            <div style={{ display:"flex", flexDirection:"column" }}>
              {activity.map((a, i) => (
                <div key={i}
                  style={{ display:"flex", alignItems:"flex-start", gap:10, padding:"8px 0",
                    borderBottom:"1px solid var(--color-hairline)", fontSize:12, color:"var(--color-ink-muted)",
                    cursor: a.id ? "pointer" : "default",
                    transition:"background 100ms ease", borderRadius:4,
                  }}
                  onClick={() => a.id && onOpenClient && onOpenClient(a.id)}
                  onMouseEnter={e => { if (a.id) e.currentTarget.style.background="var(--color-surface-2)"; }}
                  onMouseLeave={e => e.currentTarget.style.background="transparent"}>
                  <span style={{ width:6, height:6, borderRadius:"50%", background:a.color, flexShrink:0, marginTop:4 }} />
                  <span style={{ flex:1 }}>{a.text}</span>
                  <span style={{ fontSize:10.5, color:"var(--color-ink-tertiary)", whiteSpace:"nowrap" }}>{a.time}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </aside>
  );
}
window.RightPanel = RightPanel;