// Primate App Kit — prototype "Screens" navigator (Figma-layers-style panel).
// Lists every screen in the flow and jumps to it. Collapsible; when collapsed a
// small arrow button in the top-left reopens it. Mounted on every page by App.
const { useState: useStateLP, useEffect: useEffectLP } = React;

const LP_SECTIONS = [
  { group: "Marketing", items: [
    { key: "marketing", label: "Landing Page", icon: "layout" },
  ] },
  { group: "Authentication", items: [
    { key: "auth-login", label: "Login", icon: "log-in" },
    { key: "auth-signup", label: "Create Account", icon: "user-round-plus" },
  ] },
  { group: "Onboarding", items: [
    { key: "onb-0", label: "Create Your Profile", icon: "user" },
    { key: "onb-1", label: "Connect to GitHub", icon: "git-branch" },
    { key: "onb-2", label: "Select Repositories", icon: "folder-git-2" },
    { key: "onb-3", label: "Indexing", icon: "loader" },
  ] },
  { group: "Application", items: [
    { key: "app-home", label: "Home", icon: "house" },
    { key: "app-logs", label: "Review Logs", icon: "list" },
    { key: "app-details", label: "Review Details", icon: "file-text" },
    { key: "app-billing", label: "Billing", icon: "credit-card" },
    { key: "app-organization", label: "Organization", icon: "building-2" },
  ] },
];

function LPRow({ item, active, onClick }) {
  const [h, setH] = useStateLP(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: "flex", alignItems: "center", gap: 8, width: "100%", height: 28, padding: "0 10px 0 18px",
        border: "none", textAlign: "left", cursor: "pointer", borderRadius: 5,
        background: active ? "rgba(235,187,54,0.14)" : h ? "rgba(255,255,255,0.05)" : "transparent",
        transition: "background .1s ease",
      }}>
      <Icon name={item.icon} size={13} color={active ? "var(--gold)" : "var(--fg-muted)"} />
      <span style={{ font: "13px/1.5 var(--font-sans)", color: active ? "var(--gold)" : "var(--fg-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.label}</span>
    </button>
  );
}

// device-size switcher — mobile / tablet / desktop (full)
const LP_VIEWPORTS = [
  { key: "mobile",  icon: "smartphone", label: "Mobile · 430 × 932" },
  { key: "tablet",  icon: "tablet",     label: "Tablet · 834 × 1112" },
  { key: "desktop", icon: "monitor",    label: "Desktop · full width" },
];

function ViewportToggle({ value, onChange }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 4, height: 42, borderBottom: "1px solid var(--border)", flexShrink: 0 }}>
      {LP_VIEWPORTS.map((o) => {
        const active = value === o.key;
        return (
          <button key={o.key} onClick={() => onChange(o.key)} title={o.label}
            style={{
              width: 40, height: 28, display: "flex", alignItems: "center", justifyContent: "center",
              borderRadius: 6, border: "none", cursor: "pointer", transition: "background .1s ease",
              background: active ? "rgba(235,187,54,0.14)" : "transparent",
            }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
            <Icon name={o.icon} size={17} color={active ? "var(--gold)" : "var(--fg-muted)"} />
          </button>
        );
      })}
    </div>
  );
}

function LayersPanel({ current, onNavigate, viewport, onViewport }) {
  const [open, setOpen] = useStateLP(false); // collapsed by default on load

  // the Screens navigator is a desktop-only authoring affordance — hide it (rail +
  // reopen pill) whenever the real browser window is narrow.
  const [isDesktop, setIsDesktop] = useStateLP(() => (typeof window !== "undefined" ? window.innerWidth >= 1024 : true));
  useEffectLP(() => {
    const onResize = () => setIsDesktop(window.innerWidth >= 1024);
    onResize(); // re-sync post-layout (initial read can fire before the iframe settles)
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  if (!isDesktop) return null;

  return (
    <React.Fragment>
      {/* in-flow rail — animates width so the app window shrinks/widens. The aside is
          absolutely positioned (out of flow) so the rail can collapse to 0 and clip it. */}
      <div style={{
        position: "relative", flexShrink: 0, width: open ? 240 : 0, height: "100vh",
        overflow: "hidden",
        borderRight: open ? "1px solid var(--border)" : "1px solid transparent",
      }}>
        <aside style={{
          position: "absolute", top: 0, left: 0, width: 240, height: "100vh",
          display: "flex", flexDirection: "column", background: "var(--bg-elevated)",
          transform: open ? "translateX(0)" : "translateX(-240px)",
          transition: "transform .26s cubic-bezier(.4,0,.2,1)",
        }}>
          {/* header */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 44, padding: "0 8px 0 16px", borderBottom: "1px solid var(--border)", flexShrink: 0 }}>
            <span style={{ font: "600 13px/1 var(--font-sans)", letterSpacing: "0.01em", color: "var(--fg)" }}>Screens</span>
            <button onClick={() => setOpen(false)} title="Collapse"
              style={{ width: 28, height: 28, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, border: "none", background: "transparent", cursor: "pointer" }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}>
              <Icon name="panel-left-close" size={16} color="var(--fg-muted)" />
            </button>
          </div>

          {/* device-size switcher */}
          <ViewportToggle value={viewport} onChange={onViewport} />

          {/* tree */}
          <div style={{ flex: 1, overflowY: "auto", padding: "8px 8px 16px" }}>
            {LP_SECTIONS.map((sec) => (
              <div key={sec.group} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", height: 24, padding: "0 6px", font: "600 10px/1 var(--font-sans)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--fg-faint)" }}>
                  {sec.group}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 1, marginTop: 2 }}>
                  {sec.items.map((it) => (
                    <LPRow key={it.key} item={it} active={current === it.key} onClick={() => onNavigate(it.key)} />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </aside>
      </div>

      {/* collapsed: labeled pill to reopen — clearly discoverable */}
      <button onClick={() => setOpen(true)} title="Show screens"
        style={{
          position: "fixed", top: 12, left: 12, zIndex: 9999, height: 36, padding: "0 14px 0 11px",
          display: open ? "none" : "inline-flex", alignItems: "center", gap: 8,
          borderRadius: 9, border: "1px solid var(--gold)", background: "var(--bg-elevated)",
          color: "var(--fg)", font: "600 13px/1 var(--font-sans)", cursor: "pointer",
          boxShadow: "0 6px 18px rgba(0,0,0,0.4)", animation: "lpPulse 2.4s ease-in-out infinite",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-elevated-2)"; e.currentTarget.style.animation = "none"; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-elevated)"; e.currentTarget.style.animation = "lpPulse 2.4s ease-in-out infinite"; }}>
        <Icon name="panel-left-open" size={17} color="var(--gold)" />
        Screens
      </button>
      <style>{`@keyframes lpPulse { 0%,100% { box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 0 rgba(235,187,54,0.45); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 6px rgba(235,187,54,0); } }`}</style>
    </React.Fragment>
  );
}

Object.assign(window, { LayersPanel });