// Shell — top header, secondary nav, left sidebar (Sales module → Journeys)

const DeepLinkPill = ({ label, hash }) => {
  const [copied, setCopied] = React.useState(false);
  const url = (window.location.origin + window.location.pathname + hash);
  const onCopy = (e) => {
    e.stopPropagation();
    navigator.clipboard?.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <a href={hash} title={`Deep link: ${url}`} style={{
      display: "inline-flex", alignItems: "center", gap: 6, height: 28, padding: "0 6px 0 10px",
      borderRadius: 9999, border: "1px solid var(--mw-border)", background: "#fff",
      fontSize: 12, fontWeight: 500, color: "var(--mw-text-secondary)", textDecoration: "none",
      cursor: "pointer",
    }}>
      <Icon name={label === "SmartSend" ? "send" : "branch"} size={12} opacity={0.7} />
      <span>{label}</span>
      <span style={{
        fontFamily: "var(--mw-font-mono)", fontSize: 10, color: "var(--mw-text-tertiary)",
        padding: "1px 5px", background: "var(--mw-bg)", borderRadius: 4,
      }}>{hash}</span>
      <button onClick={onCopy} title="Copy deep link" style={{
        width: 22, height: 22, borderRadius: 6, border: 0,
        background: copied ? "#DAF0E0" : "transparent", cursor: "pointer",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        marginLeft: 2,
      }}>
        <Icon name={copied ? "check" : "files"} size={11} opacity={0.7} />
      </button>
    </a>
  );
};

const TopBar = ({ deepLinks = [] }) => (
  <div style={{ height: 56, display: "flex", alignItems: "center", padding: "0 24px",
    borderBottom: "1px solid var(--mw-border)", gap: 16, background: "#fff" }}>
    <img src="assets/logo-mindworks-black.png" alt="Mindworks" style={{ height: 26 }} />
    <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 8 }}>
      {deepLinks.map((l) => <DeepLinkPill key={l.hash} {...l} />)}
    </div>
    <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
      <div style={{ position: "relative", width: 320 }}>
        <Icon name="search" size={16} style={{ position: "absolute", left: 12, top: 8, opacity: 0.5 }} />
        <input className="mw-input" placeholder="Search anything…"
               style={{ width: "100%", paddingLeft: 36, height: 32 }} />
      </div>
    </div>
    <button className="mw-btn mw-btn-secondary" style={{ borderColor: "var(--mw-brand-500)", color: "var(--mw-brand-500)" }}>
      <Icon name="plus" size={14} color="brand" /> Create
    </button>
    <button style={{ width: 32, height: 32, borderRadius: 9999, border: 0, background: "transparent", cursor: "pointer" }}>
      <Icon name="bell" size={18} opacity={0.7} />
    </button>
    <div style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(135deg,#7BC8FF,#3B7FFF)" }} />
    <Avatar initials="NM" color="#76ADFF" size={28} />
  </div>
);

const SecondaryNav = ({ activeTab = "Journeys", onTab }) => {
  const tabs = ["Home", "Customers", "Opportunities", "Quotes", "Journeys", "SmartSend", "Tasks", "Reports"];
  return (
    <div style={{ height: 44, display: "flex", alignItems: "center", padding: "0 20px", gap: 4,
      background: "#fff", borderBottom: "1px solid var(--mw-border)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginRight: 16, paddingRight: 16, borderRight: "1px solid var(--mw-border)" }}>
        <Icon name="menu" size={18} opacity={0.7} />
        <span style={{ fontSize: 14, fontWeight: 500 }}>Sales</span>
        <Icon name="expandDown" size={14} opacity={0.5} />
      </div>
      {tabs.map((t) => (
        <button
          key={t}
          className={`mw-nav-tab ${t === activeTab ? "active" : ""}`}
          onClick={() => onTab && onTab(t)}
        >
          {t === "Journeys" && <Icon name="branch" size={14} color={t === activeTab ? "brand" : null} />}
          {t === "SmartSend" && <Icon name="send" size={14} color={t === activeTab ? "brand" : null} />}
          {t}
        </button>
      ))}
    </div>
  );
};

const Sidebar = ({ current = "active", onNav, counts = {}, tplCount = 0 }) => {
  return (
    <aside style={{ width: 240, padding: "20px 16px", borderRight: "1px solid var(--mw-border)", background: "#fff",
      display: "flex", flexDirection: "column", gap: 4, flexShrink: 0 }}>

      <div style={{ padding: "0 6px 8px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.6 }}>Runtime</span>
      </div>
      {[
        { id: "active",     icon: "branch",   label: "Active Journeys", count: counts.active },
        { id: "paused",     icon: "clock",    label: "Paused",          count: counts.paused },
        { id: "completed",  icon: "check",    label: "Completed",       count: counts.completed },
      ].map((it) => (
        <div key={it.id}
             className={`mw-side-item ${current === it.id ? "active" : ""}`}
             onClick={() => onNav && onNav(it.id)}>
          <Icon name={it.icon} size={16} opacity={0.75} />
          <span style={{ flex: 1 }}>{it.label}</span>
          {typeof it.count === "number" && (
            <span style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{it.count}</span>
          )}
        </div>
      ))}

      <div style={{ height: 1, background: "var(--mw-border-soft)", margin: "16px 4px 12px" }} />

      <div style={{ padding: "0 6px 8px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.6 }}>Definitions</span>
        <button onClick={() => onNav && onNav("new")} title="New Template" style={{
          width: 22, height: 22, borderRadius: 9999, border: "1px solid var(--mw-border-strong)",
          background: "#fff", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name="plus" size={12} />
        </button>
      </div>
      <div className={`mw-side-item ${current === "templates" ? "active" : ""}`}
           onClick={() => onNav && onNav("templates")}>
        <Icon name="layers" size={16} opacity={0.75} />
        <span style={{ flex: 1 }}>All Templates</span>
        <span style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{tplCount}</span>
      </div>
      {TEMPLATE_GROUPS.map((g) => {
        const items = TEMPLATES.filter((t) => t.group === g.id);
        if (items.length === 0) return null;
        return (
          <div key={g.id} style={{ marginTop: 6 }}>
            <div style={{ padding: "8px 10px 4px", fontSize: 10, fontWeight: 600, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.6 }}>
              {g.name}
            </div>
            {items.map((tpl) => (
              <div key={tpl.id} className="mw-side-item" style={{ fontSize: 13 }}
                   onClick={() => onNav && onNav(`tpl:${tpl.id}`)}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: tpl.status === "Active" ? "var(--mw-success)" : "var(--mw-text-quaternary)" }} />
                <span style={{ flex: 1 }}>{tpl.name}</span>
                <span style={{ fontSize: 12, color: "var(--mw-text-quaternary)" }}>{tpl.activeCount}</span>
              </div>
            ))}
          </div>
        );
      })}

      <div style={{ flex: 1 }} />

      <button
        onClick={() => onNav && onNav("new")}
        style={{
          marginTop: 12, padding: 14, borderRadius: 12, border: "1px solid rgba(83,74,255,.18)",
          background: "linear-gradient(135deg, rgba(123,200,255,.10), rgba(83,74,255,.10) 60%, rgba(123,61,204,.08))",
          textAlign: "left", cursor: "pointer", display: "flex", flexDirection: "column", gap: 8,
        }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <AIOrb size={18} />
          <span style={{ fontSize: 13, fontWeight: 600 }}>New Template with AI</span>
        </div>
        <span style={{ fontSize: 12, color: "var(--mw-text-tertiary)", lineHeight: 1.4 }}>
          Describe an automation in plain English — the AI drafts the trigger, timeline, and rules.
        </span>
      </button>
    </aside>
  );
};

Object.assign(window, { TopBar, SecondaryNav, Sidebar });