// chrome.jsx — Polaris Frame chrome: TopBar, Navigation, layout shell.

function TopBar({ shopName = "Sarah's Linen", searchPlaceholder = "Search apps, versions, settings" }) {
  return (
    <div style={{
      height: 56, background: '#1a1a1a', color: 'white',
      display: 'flex', alignItems: 'center',
      padding: '0 16px', gap: 16, flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: 'linear-gradient(135deg, #fff 0%, #d4d4d4 100%)',
          color: '#1a1a1a', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 14, letterSpacing: -0.4,
        }}>E</div>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Ecommos</div>
        <Badge tone="magic" style={{ fontSize: 10, padding: '1px 6px', minHeight: 18 }}>v1 · beta</Badge>
      </div>

      <div style={{
        flex: 1, maxWidth: 460, background: 'rgba(255,255,255,0.08)',
        borderRadius: 8, padding: '6px 12px', fontSize: 13,
        display: 'flex', alignItems: 'center', gap: 8,
        color: 'rgba(255,255,255,0.75)',
      }}>
        <I.search size={14} />
        <span style={{ flex: 1 }}>{searchPlaceholder}</span>
        <span style={{
          fontSize: 11, fontFamily: 'var(--p-font-family-mono)',
          color: 'rgba(255,255,255,0.4)',
          padding: '1px 5px', border: '1px solid rgba(255,255,255,0.15)',
          borderRadius: 4,
        }}>⌘K</span>
      </div>

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

      <button style={{
        appearance: 'none', border: 'none', background: 'transparent',
        color: 'rgba(255,255,255,0.75)', cursor: 'pointer', padding: 6, borderRadius: 6,
      }}><I.bell size={16} /></button>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '4px 10px 4px 4px',
        background: 'rgba(255,255,255,0.08)', borderRadius: 999,
        cursor: 'pointer',
      }}>
        <Avatar initials="SN" size="sm" color="oklch(0.72 0.12 30)" />
        <div style={{ fontSize: 12.5, lineHeight: 1.2 }}>
          <div style={{ fontWeight: 500, color: 'white' }}>Sarah Nguyễn</div>
          <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.55)' }}>{shopName}</div>
        </div>
        <I.chevronDown size={11} />
      </div>
    </div>
  );
}

function NavGroup({ children, label }) {
  return (
    <div style={{ marginTop: 12, marginBottom: 4 }}>
      {label && (
        <div style={{
          fontSize: 11, fontWeight: 500, color: 'var(--p-color-text-secondary)',
          padding: '4px 12px', textTransform: 'uppercase', letterSpacing: 0.04,
        }}>{label}</div>
      )}
      {children}
    </div>
  );
}

function NavItem({ icon: Icon, label, active, onClick, badge, indent, sub }) {
  return (
    <div
      onClick={onClick}
      style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: indent ? '6px 12px 6px 36px' : '6px 12px',
        borderRadius: 8, margin: '0 6px',
        background: active ? 'var(--p-color-bg-fill-tertiary)' : 'transparent',
        color: active ? 'var(--p-color-text)' : 'var(--p-color-text-secondary)',
        fontWeight: active ? 600 : 400,
        fontSize: 13, cursor: 'pointer',
        position: 'relative',
      }}
      onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--p-color-bg-surface-hover)'; }}
      onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
    >
      {Icon && <Icon size={15} />}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
        {sub && <div style={{ fontSize: 10.5, color: 'var(--p-color-text-secondary)', marginTop: 1 }}>{sub}</div>}
      </div>
      {badge}
    </div>
  );
}

function Sidebar({ route, navigate }) {
  const opsOpen = route.startsWith('operations');
  const creatorOpen = route.startsWith('creator');
  return (
    <div style={{
      width: 232, background: 'var(--p-color-bg-surface)',
      borderRight: '1px solid var(--p-color-border)',
      display: 'flex', flexDirection: 'column',
      flexShrink: 0, padding: '8px 0',
    }} className="p-scroll">
      <NavGroup>
        <NavItem icon={I.home} label="Home" active={route === 'home'} onClick={() => navigate('home')} />
      </NavGroup>

      <NavGroup label="Build">
        <NavItem icon={I.apps} label="Operations" active={opsOpen || route.startsWith('agent')} onClick={() => navigate('operations')}
          badge={<Badge>8</Badge>} />
        {(opsOpen || route.startsWith('agent')) && (
          <>
            <NavItem indent label="Agent Brain" active={route.startsWith('agent')} onClick={() => navigate('agent')}
              badge={<Badge tone="magic">AI</Badge>} />
            <NavItem indent label="Coupon Manager" active={route === 'operations/coupon'} onClick={() => navigate('operations/coupon')} />
            <NavItem indent label="Loyalty Hearts" onClick={() => navigate('operations')} />
            <NavItem indent label="Bundle Deals" onClick={() => navigate('operations')} />
            <NavItem indent label="Spin to Win" onClick={() => navigate('operations')} />
          </>
        )}
        <NavItem icon={I.wand} label="Creator" active={creatorOpen} onClick={() => navigate('creator')}
          badge={<Badge tone="magic">AI</Badge>} />
        {creatorOpen && (
          <>
            <NavItem indent label="My apps" active={route === 'creator'} onClick={() => navigate('creator')} />
            <NavItem indent label="Library" active={route === 'creator/library'} onClick={() => navigate('creator/library')} />
            <NavItem indent label="Drafts" active={route === 'creator/draft'} onClick={() => navigate('creator/draft')}
              badge={<Badge tone="magic">3</Badge>} />
            <NavItem indent label="New app · AI" active={route === 'creator/new'} onClick={() => navigate('creator/new')} />
          </>
        )}
      </NavGroup>

      <NavGroup label="Distribute">
        <NavItem icon={I.external} label="Marketplace" active={route.startsWith('marketplace') || route === 'creator/dashboard' || route === 'creator/publish'} onClick={() => navigate('marketplace')}
          badge={<Badge tone="magic">240+</Badge>} />
        {(route.startsWith('marketplace') || route === 'creator/dashboard' || route === 'creator/publish') && (
          <>
            <NavItem indent label="Browse apps" active={route === 'marketplace'} onClick={() => navigate('marketplace')} />
            <NavItem indent label="Publisher dashboard" active={route === 'creator/dashboard'} onClick={() => navigate('creator/dashboard')} />
            <NavItem indent label="Publish an app" active={route === 'creator/publish'} onClick={() => navigate('creator/publish')} />
          </>
        )}
      </NavGroup>

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

      <NavGroup>
        <NavItem icon={I.settings} label="Settings" />
      </NavGroup>

      <div style={{
        padding: '10px 14px', margin: 8,
        background: 'var(--p-color-bg-fill-magic)',
        color: 'var(--p-color-text-magic)',
        borderRadius: 10, fontSize: 12, lineHeight: 1.45,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600, marginBottom: 4 }}>
          <I.sparkle size={12} /> Ecommos AI
        </div>
        <div style={{ opacity: 0.85, marginBottom: 8 }}>
          120 / 200 credits used this month
        </div>
        <div style={{
          height: 4, background: 'rgba(107,70,193,0.2)', borderRadius: 2, overflow: 'hidden',
        }}>
          <div style={{ width: '60%', height: '100%', background: 'var(--p-color-bg-fill-magic-active)' }} />
        </div>
      </div>
    </div>
  );
}

// Frame — Polaris Frame composition: TopBar + Navigation + main content
function Frame({ route, navigate, children, noSidebar }) {
  return (
    <div className="p-app" style={{
      width: '100%', height: '100%',
      display: 'flex', flexDirection: 'column',
    }}>
      <TopBar />
      <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
        {!noSidebar && <Sidebar route={route} navigate={navigate} />}
        <div style={{ flex: 1, minWidth: 0, overflow: 'auto', background: 'var(--p-color-bg)' }} className="p-scroll">
          {children}
        </div>
      </div>
    </div>
  );
}

// Page — Polaris Page wrapper with content max-width.
function Page({ children, fullWidth }) {
  return (
    <div style={{
      maxWidth: fullWidth ? 'none' : 1200,
      padding: '20px 24px 40px',
      margin: '0 auto',
    }}>{children}</div>
  );
}

Object.assign(window, { TopBar, NavItem, NavGroup, Sidebar, Frame, Page });