/* global React, Icon, Wordmark, UI, DATA */
const { useState: useStateShell } = React;

function Sidebar({ route, navigate }) {
  const { Avatar } = UI;
  const ws = DATA.workspace;
  const user = DATA.currentUser;
  const groups = [
    { label: "Workspace", items: [
      { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
      { id: "projects", label: "Projects", icon: "folder" },
      { id: "marketplace", label: "Workflow marketplace", icon: "store" },
      { id: "executions", label: "Executions", icon: "activity" },
    ]},
    { label: "Assets", items: [
      { id: "connectors", label: "Connectors", icon: "link" },
      { id: "documents", label: "Documents & files", icon: "files" },
    ]},
    { label: "Administration", items: [
      { id: "team", label: "Team", icon: "users" },
      { id: "billing", label: "Billing & usage", icon: "credit-card" },
      { id: "activity", label: "Activity logs", icon: "shield" },
      { id: "settings", label: "Settings", icon: "settings" },
    ]},
  ];
  const isActive = (id) => route.name === id || (route.name === "project" && id === "projects") || (route.name === "builder" && id === "projects") || (route.name === "execution" && id === "executions") || (route.name === "createProject" && id === "projects") || (route.name === "marketplaceDetail" && id === "marketplace");

  return (
    <aside className="sidebar">
      <div style={{ padding: "18px 18px 14px", cursor: "pointer" }} onClick={() => navigate("dashboard")}>
        <Wordmark size={18} markSize={26} />
      </div>

      <div style={{ margin: "0 12px 6px", padding: "9px 11px", background: "var(--ef-bg-raised)", border: "1px solid var(--ef-border)", borderRadius: 8, display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
        <div style={{ width: 28, height: 28, borderRadius: 7, background: "var(--ef-ink-950)", color: "var(--ef-bone)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>{ws.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ef-fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ws.name}</div>
          <div style={{ fontSize: 10.5, color: "var(--ef-fg-4)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase" }}>{ws.plan}</div>
        </div>
        <Icon name="chevron-down" size={14} color="var(--ef-fg-4)" />
      </div>

      <div style={{ padding: "8px 12px 4px" }}>
        <UI.Button variant="accent" className="" onClick={() => navigate("createProject")} style={{ width: "100%" }} icon="plus">Create project</UI.Button>
      </div>

      <div className="sidebar-scroll">
        {groups.map((g) => (
          <div key={g.label}>
            <div className="nav-section">{g.label}</div>
            {g.items.map((it) => (
              <div key={it.id} className={`nav-item ${isActive(it.id) ? "active" : ""}`} onClick={() => navigate(it.id)}>
                <Icon name={it.icon} size={17} color={isActive(it.id) ? "var(--ef-beam-500)" : "var(--ef-fg-4)"} />
                {it.label}
              </div>
            ))}
          </div>
        ))}
      </div>

      <div style={{ borderTop: "1px solid var(--ef-border)", padding: "10px 12px", display: "flex", alignItems: "center", gap: 10 }}>
        <Avatar name={user.name} size={30} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ef-fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user.name}</div>
          <div style={{ fontSize: 11, color: "var(--ef-fg-4)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user.email}</div>
        </div>
        <button className="btn btn-ghost btn-icon btn-sm" title="Sign out" onClick={() => navigate("__signout")}><Icon name="log-out" size={15} color="var(--ef-fg-4)" /></button>
      </div>
    </aside>
  );
}

function TopBar({ title, crumbs, actions, navigate }) {
  const [notifOpen, setNotifOpen] = useStateShell(false);
  const notifs = [
    { icon: "alert-triangle", color: "var(--ef-danger)", text: "Google Drive needs to be reconnected", time: "14h ago" },
    { icon: "user-plus", color: "var(--ef-violet)", text: "A claim is waiting for your review", time: "5h ago" },
    { icon: "check-circle", color: "var(--ef-success)", text: "Purchase order processing run completed", time: "16m ago" },
  ];
  return (
    <div className="topbar">
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0, flex: 1 }}>
        {crumbs ? (
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, minWidth: 0 }}>
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <Icon name="chevron-right" size={14} color="var(--ef-fg-4)" />}
                {c.to ? <span className="link" style={{ textDecoration: "none", color: "var(--ef-fg-3)", fontWeight: 600, whiteSpace: "nowrap" }} onClick={() => navigate(c.to, c.params)}>{c.label}</span>
                  : <span style={{ fontWeight: 700, color: "var(--ef-fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.label}</span>}
              </React.Fragment>
            ))}
          </div>
        ) : <span style={{ fontWeight: 800, fontSize: 17, color: "var(--ef-fg-1)", letterSpacing: "-0.02em" }}>{title}</span>}
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ position: "relative", width: 260 }}>
          <span style={{ position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)" }}><Icon name="search" size={16} color="var(--ef-fg-4)" /></span>
          <input className="input" placeholder="Search projects, executions, files…" style={{ paddingLeft: 34, height: 38, background: "var(--ef-bone-2)", borderColor: "transparent" }} />
        </div>
        {actions}
        <div style={{ position: "relative" }}>
          <button className="btn btn-ghost btn-icon" title="Notifications" onClick={() => setNotifOpen((v) => !v)} style={{ position: "relative" }}>
            <Icon name="bell" size={18} color="var(--ef-fg-2)" />
            <span style={{ position: "absolute", top: 8, right: 9, width: 7, height: 7, borderRadius: 999, background: "var(--ef-beam-500)", border: "1.5px solid var(--ef-bg)" }} />
          </button>
          {notifOpen && (
            <>
              <div style={{ position: "fixed", inset: 0, zIndex: 39 }} onClick={() => setNotifOpen(false)} />
              <div className="card fade-in" style={{ position: "absolute", right: 0, top: 46, width: 320, zIndex: 41, boxShadow: "var(--ef-shadow-lg)", overflow: "hidden" }}>
                <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--ef-border)", fontWeight: 700, fontSize: 13.5, color: "var(--ef-fg-1)" }}>Notifications</div>
                {notifs.map((n, i) => (
                  <div key={i} style={{ display: "flex", gap: 11, padding: "12px 16px", borderBottom: i < notifs.length - 1 ? "1px solid var(--ef-border)" : 0, cursor: "pointer" }}>
                    <Icon name={n.icon} size={17} color={n.color} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: "var(--ef-fg-1)", fontWeight: 600, lineHeight: 1.4 }}>{n.text}</div>
                      <div style={{ fontSize: 11.5, color: "var(--ef-fg-4)", marginTop: 2 }}>{n.time}</div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;
window.TopBar = TopBar;