/* screens.jsx — MiniTop, Pipeline（顶栏与导入流程的轻量组件） */

function MiniTop({ right, onHome, crumb }) {
  return (
    <div className="topbar">
      <div onClick={onHome} style={{ display: "flex", alignItems: "center", gap: 9, cursor: onHome ? "pointer" : "default" }}>
        <BrandMark />
        <span className="crumb"><span className="brand">CARTO</span></span>
        <span className="crumb" style={{ color: "var(--t-faint)", marginLeft: 2, whiteSpace: "nowrap" }}>App Cartography</span>
      </div>
      {crumb && <>
        <span className="crumb" style={{ color: "var(--t-faint)", margin: "0 6px" }}>/</span>
        {crumb}
      </>}
      <div style={{ flex: 1 }} />
      {right}
    </div>
  );
}

function Pipeline({ step }) {
  const steps = ["链接输入", "拉取信息", "AI 定位分析"];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: "center" }}>
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          {i > 0 && <span style={{ color: "var(--t-faint)" }}><Icon name="chev" s={12} /></span>}
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", padding: "5px 11px", borderRadius: 6, whiteSpace: "nowrap",
            color: i === step ? "var(--acc-hi)" : i < step ? "var(--t)" : "var(--t-faint)",
            background: i === step ? "var(--acc-soft)" : "transparent",
            border: `1px solid ${i === step ? "rgba(139,124,246,.3)" : "var(--line)"}` }}>
            <span className="num" style={{ opacity: .7, marginRight: 6 }}>{String(i + 1).padStart(2, "0")}</span>{s}
          </span>
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, { MiniTop, Pipeline });
