// Top header + secondary nav for the Projects module
// Provide a Detailed / Simplified mode via context so any view can adapt density.
const ViewModeContext = React.createContext({ mode: "detailed", setMode: () => {} });
window.ViewModeContext = ViewModeContext;

const TopHeader = ({ onCreate, viewMode, onChangeViewMode }) => {
  return (
    <div style={{ background: "#fff", borderBottom: "1px solid rgb(227,229,232)" }}>
      {/* Top bar */}
      <div style={{ height: 56, display: "flex", alignItems: "center", padding: "0 24px", borderBottom: "1px solid rgb(239,240,242)", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <img src="design-system/assets/logo-mindworks.png" style={{ height: 28 }} alt="Mindworks" />
        </div>
        <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
          <div style={{ position: "relative", width: 360 }}>
            <span style={{ position: "absolute", left: 12, top: 8, opacity: 0.5 }}>
              <Icon name="search" size={14} color="rgb(106,115,131)" />
            </span>
            <input placeholder="Search anything…" style={{
              width: "100%", paddingLeft: 32, paddingRight: 14, height: 32, borderRadius: 9999,
              border: "1px solid rgb(213,219,225)", fontSize: 13, fontFamily: "inherit", outline: "none",
              background: "rgb(248,248,251)"
            }} />
          </div>
        </div>
        <ViewModeToggle value={viewMode} onChange={onChangeViewMode} />
        <Button kind="secondary" size="sm" icon="plus" onClick={onCreate} style={{ borderColor: "rgb(83,74,255)", color: "rgb(83,74,255)" }}>Create</Button>
        <IconBtn icon="bell" />
        <IconBtn icon="settings" />
        <Avatar initials="NM" color="#76ADFF" size={30} image="design-system/assets/avatar-nm.png" />
      </div>
      {/* Secondary nav — module + tabs */}
      <div style={{ height: 44, display: "flex", alignItems: "center", padding: "0 24px", gap: 4 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginRight: 12, paddingRight: 12, borderRight: "1px solid rgb(239,240,242)" }}>
          <Icon name="briefcase" size={16} color="rgb(83,74,255)" />
          <span style={{ fontSize: 14, fontWeight: 600 }}>Projects</span>
          <Icon name="expandDown" size={12} color="rgb(106,115,131)" />
        </div>
        {[
          { label: "Dashboard", active: false },
          { label: "Projects", active: true },
          { label: "Tasks", active: false },
          { label: "Schedule", active: false },
          { label: "Resources", active: false },
          { label: "Change Orders", active: false },
          { label: "Billing", active: false },
          { label: "Documents", active: false },
          { label: "Reports", active: false },
        ].map(t => (
          <button key={t.label} style={{
            background: t.active ? "rgb(232,233,246)" : "transparent",
            color: t.active ? "rgb(83,74,255)" : "rgb(65,69,82)",
            border: 0, padding: "6px 12px", borderRadius: 9999,
            fontFamily: "inherit", fontSize: 13, fontWeight: 500, cursor: "pointer",
            transition: "all 120ms"
          }}>{t.label}</button>
        ))}
      </div>
    </div>
  );
};

window.TopHeader = TopHeader;

const ViewModeToggle = ({ value, onChange }) => {
  const opts = [
    { id: "simplified", label: "Simplified", icon: "layers" },
    { id: "detailed",   label: "Detailed",   icon: "grid" },
  ];
  return (
    <div title="Switch how much detail you see across the project workspace" style={{
      display: "inline-flex", padding: 2, borderRadius: 9999,
      background: "rgb(241,242,244)", border: "1px solid rgb(231,233,236)"
    }}>
      {opts.map(o => {
        const active = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            height: 26, padding: "0 12px", border: 0, borderRadius: 9999, cursor: "pointer",
            background: active ? "#fff" : "transparent",
            color: active ? "rgb(83,74,255)" : "rgb(106,115,131)",
            fontFamily: "inherit", fontSize: 12, fontWeight: 600,
            boxShadow: active ? "0 1px 2px rgba(15,23,42,.1), 0 0 0 1px rgba(83,74,255,.18)" : "none",
            transition: "all 140ms"
          }}>
            <Icon name={o.icon} size={11} color={active ? "rgb(83,74,255)" : "rgb(106,115,131)"} />
            {o.label}
          </button>
        );
      })}
    </div>
  );
};

window.ViewModeToggle = ViewModeToggle;