// Task sidebar — matches the v27 RalphX app design.
// Two parts:
//   • Icon rail (vertical nav with brand + section icons + settings cog)
//   • Projects panel (+ New / search / collapse, project tree, RECENT, +Add)

const RAIL_ICONS = [
  { id: "agents",   label: "Agents",   svg: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="18" height="13" rx="2" />
      <path d="M3 11h18" />
      <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
    </svg>
  )},
  { id: "ideation", label: "Ideation", svg: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A7 7 0 0 0 12 2z" />
    </svg>
  )},
  { id: "graph",    label: "Graph",    svg: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="6" r="2" />
      <circle cx="18" cy="18" r="2" />
      <path d="M8 6h8a4 4 0 0 1 0 8H8" />
    </svg>
  )},
  { id: "kanban",   label: "Kanban",   svg: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="7" height="7" rx="1" />
      <rect x="14" y="3" width="7" height="7" rx="1" />
      <rect x="3" y="14" width="7" height="7" rx="1" />
      <rect x="14" y="14" width="7" height="7" rx="1" />
    </svg>
  )},
];

function IconRail({ activeId = "agents" }) {
  return (
    <nav className="ws-rail" aria-label="Sections">
      <div className="ws-rail-brand" aria-label="RalphX">
        <img src="logo.png" alt="" />
      </div>
      <div className="ws-rail-divider" />
      <div className="ws-rail-items">
        {RAIL_ICONS.map((it) => (
          <button
            key={it.id}
            className={`ws-rail-item ${activeId === it.id ? "is-active" : ""}`}
            aria-label={it.label}
            aria-current={activeId === it.id ? "page" : undefined}
          >
            {it.svg}
          </button>
        ))}
      </div>
      <div className="ws-rail-spacer" />
      <button className="ws-rail-item ws-rail-settings" aria-label="Settings">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="3" />
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
        </svg>
      </button>
    </nav>
  );
}

// Default project tree shown across beats. The active task changes per beat,
// matching the data driven through TASKS_BY_SCENE in Scenes.jsx.
const DEFAULT_PROJECTS = [
  { id: "ralphx",    name: "ralphx",                count: 1, expanded: false },
  { id: "reefagent", name: "reefagent-mcp-content", count: 3, expanded: true, accent: true },
  { id: "reefbot",   name: "reefbot.ai",            count: 1, expanded: false },
  { id: "shapeapp",  name: "shapeapp",              count: 1, expanded: false },
];

const RECENT_ITEMS = [
  { id: "r1", title: "Add ranking to reefbot homepage", project: "reefbot.ai", time: "2h" },
  { id: "r2", title: "Tighten kanban drag handles",     project: "shapeapp",   time: "yesterday" },
];

const STATUS_DOT_COLOR = {
  active:  "var(--accent)",
  done:    "var(--status-success)",
  open:    "var(--text-faint)",
  running: "var(--accent)",
  queued:  "var(--text-faint)",
};

function TaskRow({ task, isActive }) {
  const meta = task.meta || `master · ${task.time}`;
  const status = task.status || "open";
  return (
    <div className={`ws-prj-task ${isActive ? "is-active" : ""}`}>
      <div className="ws-prj-task-row">
        <span className="ws-prj-task-title">{task.title}</span>
        <span
          className={`ws-prj-task-dot dot-${status}`}
          style={{ background: status === "active" || status === "running" ? STATUS_DOT_COLOR.active : "transparent",
                   borderColor: status === "active" || status === "running" ? "transparent" : STATUS_DOT_COLOR.open }}
        />
      </div>
      <div className="ws-prj-task-meta">
        <span>master</span>
        <span className="ws-meta-sep">·</span>
        <span>{task.time}</span>
        {task.runState && (
          <>
            <span className="ws-meta-sep">·</span>
            <span className={`ws-run-${task.runState}`}>{task.runState}</span>
          </>
        )}
      </div>
    </div>
  );
}

function TaskSidebar({ tasks = [], activeId, projects = DEFAULT_PROJECTS, recent = RECENT_ITEMS }) {
  return (
    <aside className="ws-side">
      <div className="ws-side-header">
        <button className="ws-new-btn">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
          New
        </button>
        <span className="ws-side-spacer" />
        <button className="ws-side-icon-btn" aria-label="Search">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
        </button>
        <button className="ws-side-icon-btn" aria-label="Collapse sidebar">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
        </button>
      </div>

      <div className="ws-side-tree">
        {projects.map((p) => {
          const isHost = p.expanded;
          return (
            <div key={p.id} className={`ws-prj ${p.accent ? "is-accent" : ""} ${isHost ? "is-expanded" : ""}`}>
              <div className="ws-prj-row">
                <svg className={`chev ${isHost ? "is-open" : ""}`} width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 6l6 6-6 6" />
                </svg>
                <svg className="folder" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" /></svg>
                <span className="ws-prj-name">{p.name}</span>
                <span className={`ws-prj-count ${p.accent ? "is-accent" : ""}`}>{p.count}</span>
              </div>
              {isHost && tasks.length > 0 && (
                <div className="ws-prj-tasks">
                  {tasks.map((t) => (
                    <TaskRow key={t.id} task={t} isActive={t.id === activeId} />
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="ws-side-recent-wrap">
        <div className="ws-side-recent-head">
          <span className="ws-side-recent-label">RECENT</span>
          <span className="ws-side-recent-link">View all</span>
        </div>
        <div className="ws-side-recent">
          {recent.map((r) => (
            <div key={r.id} className="ws-recent-item">
              <span className="ws-recent-dot" />
              <div className="ws-recent-body">
                <div className="ws-recent-title">{r.title}</div>
                <div className="ws-recent-meta">
                  <span>{r.project}</span>
                  <span className="ws-meta-sep">·</span>
                  <span>{r.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <button className="ws-side-add">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
          Add project
        </button>
      </div>
    </aside>
  );
}

// The bottom composer that appears in many of the real screens.
function Composer({ placeholder = "Ask the agent to plan, build, debug, or review something" }) {
  return (
    <div className="ws-composer">
      <div className="ws-composer-text">{placeholder}</div>
      <div className="ws-composer-controls">
        <span className="ws-attach">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21.4 11.05l-9 9a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8.5-8.5" />
          </svg>
        </span>
        <span className="ws-control-mini">
          <span className="key">PROVIDER</span>
          <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
          Codex
          <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M6 9l6 6 6-6" /></svg>
        </span>
        <span className="ws-control-mini">
          <span className="key">MODEL</span>
          <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="6" width="12" height="12" rx="1" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></svg>
          gpt-5.4
          <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M6 9l6 6 6-6" /></svg>
        </span>
        <span className="ws-controls-spacer" />
        <span className="ws-send">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
          Send
        </span>
      </div>
      <div className="ws-statusbar">
        <span className="ws-statusbar-left">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" /></svg>
          <span className="key">PROJECT</span> ralphx
        </span>
        <span className="ws-statusbar-right">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2" /><circle cx="6" cy="18" r="2" /><circle cx="18" cy="12" r="2" /><path d="M6 8v8M8 18h6a4 4 0 0 0 4-4" /></svg>
          <span className="key">START FROM</span> Current branch (feature/agent-screen)
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { TaskSidebar, IconRail, Composer });