// Shared claude.ai app shell — sidebar + chat column, composable for all frames.

const SidebarIconBtn = ({ name }) => (
  <button className="icon-btn" style={{background:'transparent', border:0, padding:4, color:'var(--ink-muted)', cursor:'default'}}>
    <Icon name={name} size={15}/>
  </button>
);

// ---- Sidebar ----
const Sidebar = ({ variant = "chat", activeChat = "vendor", activeProjectChild = null }) => {
  // Chats list — Priya's world, chat-only
  const chats = [
    { id: "vendor",    label: "Vendor eval, Q2 platform",       active: true, pinned: false, project: true },
    { id: "ooo",       label: "OOO policy brief for CS team" },
    { id: "abm",       label: "ABM campaign ideas for March push" },
    { id: "qbr",       label: "Draft: Q1 customer QBR narrative" },
    { id: "interview", label: "Interview loop for sr. AE" },
    { id: "forecast",  label: "Pipeline forecast, EMEA" },
    { id: "onboard",   label: "Enterprise onboarding checklist" },
    { id: "rfp",       label: "RFP template notes" },
    { id: "sum",       label: "Summer conference shortlist" },
    { id: "alum",      label: "Reconnect w/ Stanford alum" },
    { id: "exp",       label: "Expense policy FAQ" },
    { id: "eng",       label: "Pricing page engineering scope" },
  ];

  const projectFiles = [
    { name: "ACME Proposal.pdf" },
    { name: "Vendra Proposal.pdf" },
    { name: "Northstar Proposal.pdf" },
  ];

  const projectChildren = [
    { id: "main",   label: "Compare pricing & security" },
    { id: "review", label: "Vendor review team", agent: true },
    { id: "parallel", label: "Parallel exploration", agent: true },
  ];

  const isProject = variant.startsWith("project");
  const isRun = variant === "project-run";
  const isParallel = variant === "project-parallel";

  return (
    <aside className="sb">
      <div className="sb-top">
        <div className="sb-logo">
          <span className="sb-logo-mark">C</span>
          Claude
        </div>
        <div className="sb-icons">
          <SidebarIconBtn name="search"/>
          <SidebarIconBtn name="pen-square"/>
        </div>
      </div>

      <nav className="sb-nav">
        <div className="sb-item"><Icon name="plus"/> New chat <span className="kbd">⌘K</span></div>
        <div className="sb-item"><Icon name="messages"/> Chats</div>
        <div className="sb-item"><Icon name="folders"/> Projects</div>
        <div className="sb-item"><Icon name="artifacts"/> Artifacts</div>
      </nav>

      {isProject && (
        <>
          <div className="sb-section-label">Project <span className="expand"><Icon name="chevron-down" size={10}/></span></div>
          <div className="sb-project">
            <div className="sb-project-head">
              <Icon name="folder"/> Q2 Vendor Eval
              <span className="chev"><Icon name="chevron-down" size={12}/></span>
            </div>
            <div className="sb-project-files">
              {projectFiles.map(f => (
                <div className="sb-file" key={f.name}>
                  <Icon name="file-text"/> {f.name}
                </div>
              ))}
            </div>
            <div className="sb-project-children">
              {projectChildren
                .filter(c => {
                  if (c.id === "main") return true;
                  if (c.id === "review") return isRun;
                  if (c.id === "parallel") return isParallel;
                  return false;
                })
                .map(c => (
                  <div
                    key={c.id}
                    className={"sb-project-child" + (c.id === activeProjectChild ? " active" : "")}
                  >
                    <span className="dot"/> {c.label}
                  </div>
                ))}
            </div>
          </div>
        </>
      )}

      <div className="sb-section-label">
        Recents
        <span className="expand">View all <Icon name="chevron-right" size={10}/></span>
      </div>
      <div className="sb-list">
        {chats
          .filter(c => !(isProject && c.project))
          .slice(0, 10)
          .map(c => (
            <div key={c.id} className={"sb-chat" + (c.id === activeChat && !isProject ? " active" : "")}>
              <span className="dot"/>
              <span className="label">{c.label}</span>
            </div>
          ))}
      </div>

      <div className="sb-user">
        <div className="sb-user-avatar">PR</div>
        <div className="sb-user-name">Priya Rao</div>
        <span className="sb-user-chev"><Icon name="chevron-up" size={14}/></span>
      </div>
    </aside>
  );
};

// ---- Chat header ----
const ChatHeader = ({ title, breadcrumb, model = "Claude Sonnet 4.7", showRailToggle = false }) => (
  <div className="chat-head">
    <div className="chat-title">
      {breadcrumb ? (
        <>
          <Icon name="folder" size={14} style={{color:'var(--accent)'}}/>
          {breadcrumb.map((b, i) => (
            <React.Fragment key={i}>
              <span className="crumb">{b}</span>
              {i < breadcrumb.length - 1 && <span className="crumb-sep">›</span>}
            </React.Fragment>
          ))}
        </>
      ) : (
        <span>{title}</span>
      )}
    </div>
    <div className="chat-head-actions">
      <span className="model-pill">
        <Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>
        {model}
      </span>
      <button><Icon name="share"/></button>
      <button><Icon name="more"/></button>
      {showRailToggle && <button><Icon name="panel-right"/></button>}
    </div>
  </div>
);

// ---- Composer ----
const Composer = ({ placeholder = "Reply to Claude…" }) => (
  <div className="composer-wrap">
    <div className="composer">
      <div className="composer-input">{placeholder}</div>
      <div className="composer-row">
        <div className="left">
          <button><Icon name="plus"/></button>
          <button><Icon name="attach"/></button>
        </div>
        <div className="right">
          <button>Sonnet 4.7 <Icon name="chevron-down" size={12}/></button>
          <button><Icon name="mic"/></button>
          <button className="composer-send"><Icon name="arrow-up" size={14}/></button>
        </div>
      </div>
    </div>
    <div className="composer-footnote">Claude can make mistakes. Double-check responses.</div>
  </div>
);

// ---- Message bits ----
const UserMsg = ({ children }) => <div className="msg-user">{children}</div>;
const AsstMsg = ({ children, withActions = false }) => (
  <div>
    <div className="msg-assistant">{children}</div>
    {withActions && (
      <div className="msg-actions">
        <button><Icon name="copy"/></button>
        <button><Icon name="refresh"/></button>
        <button><Icon name="thumbs-up"/></button>
        <button><Icon name="thumbs-down"/></button>
      </div>
    )}
  </div>
);
const DocRef = ({ name }) => (
  <span className="doc-ref"><Icon name="file-text"/> {name}</span>
);

Object.assign(window, { Sidebar, ChatHeader, Composer, UserMsg, AsstMsg, DocRef });