// Chrome for creator surfaces — Logo, TopNav, SideNav, PageHeader, Section
// Adapted for the 6-screen mockup (Overview / License / Approvals).

const Logo = ({ inverse = false }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <span style={{
      width: 22, height: 22, borderRadius: 999, background: "var(--lk-terracotta)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg viewBox="0 0 20 20" width="11" height="11" fill="none">
        <path d="M6 4 V16 H14" stroke="#fff" strokeWidth="2" strokeLinecap="square" />
      </svg>
    </span>
    <span style={{
      font: "600 16px/1 var(--font-sans)", letterSpacing: "-0.01em",
      color: inverse ? "#fff" : "var(--lk-navy)",
    }}>Likeness</span>
  </span>
);

const TopNav = ({ user, pendingCount }) => (
  <header style={{
    height: 56, borderBottom: "1px solid var(--lk-border)",
    display: "flex", alignItems: "center", padding: "0 24px", background: "#fff",
    position: "sticky", top: 0, zIndex: 5,
  }}>
    <Logo />
    <span style={{
      marginLeft: 16, paddingLeft: 16, borderLeft: "1px solid var(--lk-border)",
      font: "500 13px/1 var(--font-sans)", color: "var(--lk-muted)",
    }}>Creator Studio</span>

    <div style={{
      marginLeft: 32, flex: 1, maxWidth: 320, display: "flex", alignItems: "center", gap: 8,
      height: 32, padding: "0 12px", borderRadius: 4, background: "var(--lk-tint)",
      border: "1px solid transparent",
    }}>
      <i data-lucide="search" style={{ width: 14, height: 14, color: "var(--lk-muted)" }}></i>
      <input placeholder="Search submissions, subscribers, licenses…" style={{
        all: "unset", flex: 1, font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)",
      }}/>
      <span style={{ font: "500 11px/1 var(--font-mono)", color: "var(--lk-muted)" }}>⌘K</span>
    </div>

    <div style={{ flex: 1 }} />
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <IconButton icon="bell" badge={pendingCount} />
      <IconButton icon="life-buoy" />
      <span style={{ width: 1, height: 24, background: "var(--lk-border)", margin: "0 4px" }}></span>
      <Avatar name={user.name} size={28} />
      <span style={{ font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)" }}>{user.name}</span>
    </div>
  </header>
);

const NAV_ITEMS = [
  { id: "dashboard", label: "Home",            icon: "home" },
  { id: "content",   label: "Content",         icon: "image" },
  { id: "license",   label: "License",         icon: "file-check-2" },
  { id: "approval",  label: "Approval queue",  icon: "inbox" },
  { id: "subscribers", label: "Subscribers",   icon: "users" },
  { id: "earnings",  label: "Earnings",        icon: "dollar-sign" },
  { id: "settings",  label: "Settings",        icon: "settings-2" },
];

const SideNav = ({ active, onSelect, pendingCount }) => (
  <nav style={{
    width: 240, borderRight: "1px solid var(--lk-border)",
    background: "#fff", padding: "16px 12px", display: "flex", flexDirection: "column", gap: 2,
    minHeight: "calc(100vh - 56px)", position: "sticky", top: 56, alignSelf: "flex-start",
  }}>
    <span style={{
      font: "600 11px/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase",
      color: "var(--lk-muted)", padding: "10px 12px 6px",
    }}>Mara West</span>
    {NAV_ITEMS.map(item => {
      const isActive = active === item.id;
      const showBadge = item.id === "approval" && pendingCount > 0;
      return (
        <button key={item.id} onClick={() => onSelect(item.id)} style={{
          all: "unset", cursor: "pointer", display: "flex", alignItems: "center", gap: 10,
          padding: "8px 12px", borderRadius: 4,
          background: isActive ? "rgba(199,111,61,0.10)" : "transparent",
          color: isActive ? "var(--lk-terracotta-08)" : "var(--lk-navy)",
          font: "500 13px/1 var(--font-sans)",
          transition: "background 120ms",
        }}
        onMouseOver={e => { if (!isActive) e.currentTarget.style.background = "rgba(26,31,54,0.04)"; }}
        onMouseOut={e => { if (!isActive) e.currentTarget.style.background = "transparent"; }}
        >
          <i data-lucide={item.icon} style={{ width: 16, height: 16 }}></i>
          <span style={{ flex: 1 }}>{item.label}</span>
          {showBadge ? <Chip variant="warning" size="xs">{pendingCount}</Chip> : null}
        </button>
      );
    })}
    <div style={{ flex: 1 }} />
    <div style={{
      padding: 12, borderRadius: 4, background: "var(--lk-tint)",
      display: "flex", flexDirection: "column", gap: 4,
    }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--lk-success)" }}></span>
        <span style={{ font: "600 12px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>License active</span>
      </span>
      <span style={{ font: "400 11px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>
        Verification renewed Mar 14. Next ID check Sep 14.
      </span>
    </div>
  </nav>
);

const PageHeader = ({ title, subtitle, actions, eyebrow }) => (
  <div style={{
    display: "flex", alignItems: "flex-end", justifyContent: "space-between",
    paddingBottom: 20, borderBottom: "1px solid var(--lk-border)", marginBottom: 28, gap: 24,
  }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {eyebrow && <span className="lk-eyebrow">{eyebrow}</span>}
      <h1 style={{ margin: 0, font: "600 28px/1.15 var(--font-sans)", letterSpacing: "-0.02em", color: "var(--lk-navy)" }}>{title}</h1>
      {subtitle && <span className="lk-small" style={{ fontSize: 14 }}>{subtitle}</span>}
    </div>
    {actions && <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>{actions}</div>}
  </div>
);

const Section = ({ title, hint, action, children, dense = false }) => (
  <section style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: dense ? 24 : 36 }}>
    {(title || action) && (
      <header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <h2 style={{ margin: 0, font: "600 16px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{title}</h2>
          {hint && <span className="lk-small" style={{ fontSize: 13 }}>{hint}</span>}
        </div>
        {action}
      </header>
    )}
    {children}
  </section>
);

Object.assign(window, { Logo, TopNav, SideNav, PageHeader, Section, NAV_ITEMS });