// routes-basic.jsx — Home + Operations + Library + simple sub-screens.
// Editor and storefront live in their own files.

function RouteHome({ navigate, state }) {
  return (
    <Page>
      <PageHeader
        eyebrow="Sarah's Linen"
        title="Home"
        primary={<Btn variant="primary" icon={I.wand} onClick={() => navigate('creator/new')}>Build new app</Btn>}
        secondary={<Btn icon={I.plus} onClick={() => navigate('creator/library')}>Install app</Btn>}
      />

      <Banner tone="magic" icon={I.sparkle} dismissible>
        <b>Welcome to Ecommos.</b> Pick one of the {state.creator.libraryCount} starter apps, or describe what you need and we'll build it together.
      </Banner>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 20 }}>
        {[
          ['Apps installed', '7', '+2 this week'],
          ['Versions shipped', '34', '4 today'],
          ['Active widgets', '3', 'On storefront'],
          ['AI edits', '12', 'Last 7 days'],
        ].map(([l, v, s]) => (
          <Card padding key={l}>
            <div className="p-eyebrow" style={{ textTransform: 'uppercase', letterSpacing: 0.04, fontSize: 11, fontWeight: 500 }}>{l}</div>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.4, marginTop: 4 }}>{v}</div>
            <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)' }}>{s}</div>
          </Card>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginTop: 16 }}>
        <Card>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--p-color-border)', display: 'flex', alignItems: 'center' }}>
            <I.apps size={14} />
            <div style={{ fontWeight: 600, fontSize: 14, marginLeft: 8, flex: 1 }}>Operations</div>
            <Btn variant="plain" size="sm" iconRight={I.chevronRight} onClick={() => navigate('operations')}>View all</Btn>
          </div>
          {[
            ['Coupon Manager', 'Discounts', '4 minutes ago', 'success', '24 active', 'operations/coupon'],
            ['Loyalty Hearts', 'Retention', '2 hours ago', 'success', '1,240 members', 'operations'],
            ['Bundle Deals', 'Cross-sell', 'Yesterday', 'success', '6 bundles', 'operations'],
            ['Spin to Win', 'Storefront', '5 days ago', 'warning', 'Paused', 'operations'],
          ].map(([n, c, t, tone, m, route]) => (
            <div key={n} onClick={() => navigate(route)} style={{
              padding: '12px 16px', borderTop: '1px solid var(--p-color-border-secondary)',
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--p-color-bg-surface-hover)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: 'var(--p-color-bg-fill-tertiary)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 600, fontSize: 13,
              }}>{n[0]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{n}</div>
                <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>{c} · {t}</div>
              </div>
              <Badge tone={tone}>{m}</Badge>
              <I.chevronRight size={12} />
            </div>
          ))}
        </Card>

        <Card>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--p-color-border)', display: 'flex', alignItems: 'center' }}>
            <I.wand size={14} />
            <div style={{ fontWeight: 600, fontSize: 14, marginLeft: 8, flex: 1 }}>Creator</div>
            <Badge tone="magic">AI</Badge>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)', marginBottom: 8 }}>Describe an app</div>
            <Input
              size="lg"
              placeholder={'"Flash sale for VIP, 1 hour, with countdown"'}
              suffix={<Btn variant="magic" size="sm" icon={I.sparkle} onClick={() => navigate('creator/new')}>Build</Btn>}
            />
            <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)', margin: '14px 0 6px', textTransform: 'uppercase', letterSpacing: 0.04, fontWeight: 500 }}>Or pick a template</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['Reviews', 'Quiz', 'Pop-up', 'Wishlist', 'Cross-sell', 'FAQ'].map((c) => (
                <Chip key={c} onClick={() => navigate('creator/library')}>{c}</Chip>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </Page>
  );
}

function RouteOperations({ navigate, state }) {
  // Agent Brain is treated as an operations app — first-class citizen, magic styling.
  const apps = [
    {
      name: 'Coupon Manager', category: 'Discounts', status: 'Active', tone: 'success',
      last: '4m ago', version: 'v3', metric: '24', metricLabel: 'active codes',
      trend: '+3 this week', route: 'operations/coupon',
    },
    {
      name: 'Loyalty Hearts', category: 'Retention', status: 'Active', tone: 'success',
      last: '2h ago', version: 'v7', metric: '1,240', metricLabel: 'members',
      trend: '+42 this week', route: 'operations',
    },
    {
      name: 'Bundle Deals', category: 'Cross-sell', status: 'Active', tone: 'success',
      last: 'Yesterday', version: 'v2', metric: '6', metricLabel: 'bundles live',
      trend: '$1.2k attributed', route: 'operations',
    },
    {
      name: 'Discount Stacker', category: 'Discounts', status: 'Active', tone: 'success',
      last: '15m ago', version: 'v1', metric: '8', metricLabel: 'rules',
      trend: 'Pro variant', route: 'operations',
    },
    {
      name: 'Spin to Win', category: 'Storefront', status: 'Paused', tone: 'warning',
      last: '5d ago', version: 'v4', metric: '412', metricLabel: 'spins · paused',
      trend: 'Inventory low', route: 'operations',
    },
    {
      name: 'FAQ Block', category: 'Content', status: 'Active', tone: 'success',
      last: '1d ago', version: 'v3', metric: '—', metricLabel: 'static',
      trend: 'Mobile fix', route: 'operations',
    },
    {
      name: 'Wishlist Drawer', category: 'Conversion', status: 'Draft', tone: 'neutral',
      last: '—', version: 'v1', metric: '0', metricLabel: 'not installed',
      trend: 'Initial scaffold', route: 'operations',
    },
  ];

  return (
    <Page>
      <PageHeader
        eyebrow="Operations"
        title="Your apps"
        primary={<Btn variant="primary" icon={I.plus} onClick={() => navigate('creator/library')}>Install app</Btn>}
        secondary={<Btn variant="plain" iconRight={I.chevronDown}>Sort: Last used</Btn>}
      />

      <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '4px 0 16px' }}>
        <div style={{ flex: '0 0 260px' }}>
          <Input placeholder="Search apps" prefix={<I.search size={14} />} suffix={null} />
        </div>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {['All', 'AI', 'Active', 'Draft', 'Paused'].map((t, i) => (
            <Chip key={t} active={i === 0}>{t}</Chip>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)' }}>8 apps · 2 archived</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {/* Agent Brain — featured, spans 2 columns */}
        <AgentBrainCard onClick={() => navigate('agent')} />

        {apps.map((a) => (
          <AppCard key={a.name} app={a} onClick={() => navigate(a.route)} />
        ))}

        {/* Install / build CTA card */}
        <Card onClick={() => navigate('creator/library')} style={{
          padding: 16, cursor: 'pointer',
          borderStyle: 'dashed',
          background: 'transparent',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          textAlign: 'center', minHeight: 150,
          color: 'var(--p-color-text-secondary)',
        }}>
          <I.plus size={18} />
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6, color: 'var(--p-color-text)' }}>Install an app</div>
          <div style={{ fontSize: 11.5, marginTop: 2 }}>Browse library · 20 starters</div>
        </Card>
      </div>

      <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)', textAlign: 'center', marginTop: 16 }}>
        Showing 8 of 8 · <a style={{ color: 'var(--p-color-text-link)', cursor: 'pointer' }}>Load archived (2)</a>
      </div>
    </Page>
  );
}

// — Featured Agent Brain card — spans 2 cols, magic styling, opens chat
function AgentBrainCard({ onClick }) {
  return (
    <Card onClick={onClick} style={{
      gridColumn: 'span 2',
      padding: 0, cursor: 'pointer', overflow: 'hidden',
      borderColor: 'var(--p-color-border-magic)',
      background: 'linear-gradient(135deg, var(--p-color-bg-fill-magic) 0%, var(--p-color-bg-surface) 60%)',
      position: 'relative',
    }}>
      <div style={{ padding: 16, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 11,
          background: 'linear-gradient(135deg, var(--p-color-bg-fill-magic-active) 0%, #a18bff 100%)',
          color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 6px 16px rgba(107,70,193,0.25)', flexShrink: 0,
        }}>
          <I.sparkle size={20} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Agent Brain</div>
            <Badge tone="magic" dot>Approval mode</Badge>
            <div style={{ flex: 1 }} />
            <span style={{ fontSize: 11, color: 'var(--p-color-text-secondary)' }}>4 chats · 3 workflows</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--p-color-text-secondary)', lineHeight: 1.45 }}>
            One agent across your shop &amp; apps — ask questions, run workflows, take action with approval.
          </div>
          <div style={{
            marginTop: 10, padding: '8px 10px',
            background: 'var(--p-color-bg-surface)',
            border: '1px solid var(--p-color-border-secondary)',
            borderRadius: 8,
            display: 'flex', alignItems: 'center', gap: 8,
            fontSize: 12.5, color: 'var(--p-color-text-secondary)',
          }}>
            <I.search size={12} />
            <span style={{ flex: 1 }}>Ask Brain anything — e.g. "VIPs who haven't ordered in 30 days"</span>
            <Btn variant="magic" size="sm" icon={I.send}>Open chat</Btn>
          </div>
        </div>
      </div>
      <div style={{
        display: 'flex', gap: 0,
        borderTop: '1px solid var(--p-color-border-secondary)',
        background: 'var(--p-color-bg-surface)',
      }}>
        {[
          ['Last chat', 'VIP win-back coupon · 50m ago'],
          ['Active workflows', '2 of 3 on'],
          ['Sources', '5 Shopify · 4 apps'],
        ].map(([l, v], i) => (
          <div key={l} style={{
            flex: 1, padding: '8px 12px',
            borderLeft: i ? '1px solid var(--p-color-border-secondary)' : 'none',
          }}>
            <div style={{ fontSize: 10.5, color: 'var(--p-color-text-secondary)', textTransform: 'uppercase', letterSpacing: 0.04, fontWeight: 600 }}>{l}</div>
            <div style={{ fontSize: 12, fontWeight: 500, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// — Standard app card for Operations dashboard
function AppCard({ app, onClick }) {
  return (
    <Card onClick={onClick} style={{ padding: 14, cursor: 'pointer', minHeight: 150, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: 'var(--p-color-bg-fill-tertiary)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 600, fontSize: 14, flexShrink: 0,
        }}>{app.name[0]}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{app.name}</div>
          <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>{app.category} · <span className="p-mono">{app.version}</span></div>
        </div>
        <Badge tone={app.tone} dot>{app.status}</Badge>
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 'auto' }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4 }}>{app.metric}</div>
        <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>{app.metricLabel}</div>
      </div>

      <div style={{
        marginTop: 10, paddingTop: 8,
        borderTop: '1px solid var(--p-color-border-secondary)',
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 11.5, color: 'var(--p-color-text-secondary)',
      }}>
        <span style={{ flex: 1 }}>{app.trend}</span>
        <span>·</span>
        <span>{app.last}</span>
      </div>
    </Card>
  );
}

function RouteCouponApp({ navigate, state }) {
  const coupons = [
    ['SUMMER25', '25% off', 'Active', 'success', '1,042', 'Jun 1 – Aug 31'],
    ['WELCOME10', '$10 off first', 'Active', 'success', '612', 'No end'],
    ['SHIPFREE', 'Free shipping', 'Active', 'success', '2,380', 'Ongoing'],
    ['FLASH50', '50% off · flash', 'Scheduled', 'info', '0', 'Jun 30 · 8–9pm'],
    ['VIP-LOYAL', '15% off · VIP', 'Active', 'success', '198', 'No end'],
    ['BACK2SCHOOL', '20% off', 'Expired', null, '4,521', 'Aug 15 – Sep 1'],
  ];
  return (
    <Page>
      <Banner tone="magic" icon={I.wand} style={{ marginBottom: 16 }}>
        Running <b>Coupon Manager v3</b> · built by you in Creator
        <Btn variant="plain" size="sm" icon={I.edit} onClick={() => navigate('creator/editor')} style={{ float: 'right', marginTop: -3 }}>Edit in Creator</Btn>
      </Banner>

      <PageHeader
        eyebrow={
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ cursor: 'pointer', color: 'var(--p-color-text-secondary)' }} onClick={() => navigate('operations')}>Operations</span>
            <I.chevronRight size={11} /> Coupon Manager
          </span>
        }
        title={<>Coupons <span style={{ color: 'var(--p-color-text-secondary)', fontSize: 16, fontWeight: 500, marginLeft: 8 }}>· 6 codes</span></>}
        primary={<Btn variant="primary" icon={I.plus}>New coupon</Btn>}
        secondary={<Btn iconRight={I.chevronDown}>Bulk actions</Btn>}
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 16 }}>
        {[
          ['Active', '4', 'success'],
          ['Redemptions today', '128', null],
          ['Revenue (mo)', '$3,420', null],
          ['Avg. discount', '18%', null],
        ].map(([l, v, t]) => (
          <Card padding key={l}>
            <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--p-color-text-secondary)', textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4 }}>{v}</div>
              {t && <Badge tone={t} dot>live</Badge>}
            </div>
          </Card>
        ))}
      </div>

      <Card>
        <div className="p-table__head" style={{ gridTemplateColumns: '28px 2fr 2fr 1fr 1fr 1.5fr 32px' }}>
          <Checkbox />
          <div>Code</div><div>Discount</div><div>Status</div><div>Used</div><div>Validity</div><div></div>
        </div>
        {coupons.map((r, i) => (
          <div key={i} className="p-table__row"
            style={{ gridTemplateColumns: '28px 2fr 2fr 1fr 1fr 1.5fr 32px' }}>
            <Checkbox />
            <div className="p-mono" style={{ fontWeight: 600 }}>{r[0]}</div>
            <div>{r[1]}</div>
            <div>{r[3] ? <Badge tone={r[3]}>{r[2]}</Badge> : <Badge>{r[2]}</Badge>}</div>
            <div className="p-mono" style={{ color: 'var(--p-color-text-secondary)' }}>{r[4]}</div>
            <div style={{ color: 'var(--p-color-text-secondary)', fontSize: 12 }}>{r[5]}</div>
            <Btn variant="plain" size="sm" icon={I.more} />
          </div>
        ))}
      </Card>
    </Page>
  );
}

const LIBRARY = [
  ['Coupon Manager', 'Discounts', 'Generate & manage promo codes', true],
  ['Loyalty Hearts', 'Retention', 'Points + tiers + rewards', true],
  ['Bundle Deals', 'Cross-sell', 'Build product bundles with auto-discount', true],
  ['Reviews Wall', 'Social proof', 'Collect & display product reviews'],
  ['Subscriptions', 'Recurring', 'Sub plans & recurring billing'],
  ['Spin to Win', 'Storefront', 'Gamified discount pop-up', true],
  ['Wishlist Drawer', 'Conversion', 'Customers save items for later', true],
  ['Cross-sell Slider', 'Cart', 'Recommendations on cart page'],
  ['Pop-up Promo', 'Storefront', 'Timed promotional pop-ups'],
  ['FAQ Block', 'Content', 'Drop-in FAQ accordion', true],
  ['Notifications Bar', 'Storefront', 'Top-of-page announcement bar'],
  ['Quiz Recommender', 'Discovery', 'Style/product quiz → recommendations'],
  ['Trust Badges', 'Storefront', 'Payment iconography row'],
  ['Sticky Add-to-cart', 'Conversion', 'Mobile sticky CTA'],
  ['Free Gift', 'Promotions', 'Auto-add free gift over threshold'],
  ['Recently Viewed', 'Discovery', 'Show last-viewed products'],
  ['Discount Stacker', 'Discounts', 'Combine multiple codes with rules', true],
  ['Shipping Calculator', 'Cart', 'Estimate shipping inline'],
  ['Size Guide', 'Conversion', 'Per-product size charts'],
  ['Back in Stock', 'Notifications', 'Email when item restocks'],
];

function RouteLibrary({ navigate, state, setState }) {
  const [tab, setTab] = React.useState('library');
  const [filter, setFilter] = React.useState('All');
  const [previewApp, setPreviewApp] = React.useState(null); // { name, category, installed }
  const [librarySort, setLibrarySort] = React.useState('curated'); // curated · popular · newest · a-z
  const [libraryQuery, setLibraryQuery] = React.useState('');

  // Live filter for Library tab — category + search + sort
  let filtered = LIBRARY.filter((a) => filter === 'All' || a[1] === filter);
  if (libraryQuery) {
    const q = libraryQuery.toLowerCase();
    filtered = filtered.filter((a) => a[0].toLowerCase().includes(q) || a[2].toLowerCase().includes(q));
  }
  if (librarySort === 'a-z') filtered = [...filtered].sort((a,b) => a[0].localeCompare(b[0]));
  if (librarySort === 'popular') filtered = [...filtered].sort((a,b) => (b[3]?1:0) - (a[3]?1:0));

  const openDraft = (id) => {
    setState((s) => ({ ...s, draftDetail: { id } }));
    navigate('creator/draft');
  };

  return (
    <Page>
      <PageHeader
        eyebrow="Creator"
        title="App library"
        primary={<Btn variant="magic" icon={I.sparkle} onClick={() => navigate('creator/new')}>Create with AI</Btn>}
        secondary={<Btn iconRight={I.external} onClick={() => navigate('marketplace')}>Marketplace</Btn>}
      />

      <div style={{ fontSize: 13, color: 'var(--p-color-text-secondary)', marginTop: -8, marginBottom: 16 }}>
        20 starter apps, free to install. Or build your own from scratch with AI. <b>Click any card</b> to preview how it looks in the admin and on your storefront.
      </div>

      <Tabs
        tabs={[
          { id: 'library', label: 'Starters', count: LIBRARY.length },
          { id: 'mine', label: 'Installed', count: 7 },
          { id: 'drafts', label: 'Drafts', count: MY_DRAFTS.length },
          { id: 'marketplace', label: 'Marketplace · 240+', count: null },
        ]}
        value={tab}
        onChange={(t) => {
          if (t === 'marketplace') { navigate('marketplace'); return; }
          setTab(t);
        }}
      />

      {tab === 'library' && <>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '16px 0 12px' }}>
          <div style={{ flex: '0 0 240px' }}>
            <Input placeholder="Search starters" prefix={<I.search size={14} />} value={libraryQuery} onChange={setLibraryQuery} />
          </div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {['All', 'Discounts', 'Retention', 'Cross-sell', 'Storefront', 'Conversion', 'Content', 'Discovery'].map((c) => (
              <Chip key={c} active={filter === c} onClick={() => setFilter(c)}>{c}</Chip>
            ))}
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)' }}>Sort:</div>
          {[['curated','Curated'],['a-z','A–Z']].map(([id,l]) => (
            <Chip key={id} active={librarySort===id} onClick={() => setLibrarySort(id)}>{l}</Chip>
          ))}
        </div>
        <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)', marginBottom: 10 }}>
          {filtered.length} of {LIBRARY.length} starters · {filtered.filter((a)=>a[3]).length} already installed
        </div>
      </>}

      {tab === 'mine' && <InstalledAppsView navigate={navigate} />}
      {tab === 'drafts' && <DraftsView navigate={navigate} openDraft={openDraft} />}

      {tab === 'library' && <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {filtered.length === 0 && (
          <Card style={{ gridColumn: '1 / -1', padding: 40, textAlign: 'center', color: 'var(--p-color-text-secondary)' }}>
            <I.search size={20} />
            <div style={{ fontSize: 13, marginTop: 8 }}>No starters match "{libraryQuery}".</div>
            <Btn size="sm" style={{ marginTop: 12 }} onClick={() => { setLibraryQuery(''); setFilter('All'); }}>Reset filters</Btn>
          </Card>
        )}
        {filtered.map(([n, cat, d, inst]) => {
          const meta = (window.getPreview ? window.getPreview(n) : { surfaces: ['storefront'] });
          const surfaceLabel = meta.surfaces.length === 2 ? 'Admin + Storefront'
            : meta.surfaces[0] === 'admin' ? 'Admin' : 'Storefront';
          return (
            <Card key={n}
              onClick={() => setPreviewApp({ name: n, category: cat, installed: !!inst })}
              style={{ cursor: 'pointer', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
            >
              {/* Live mini preview thumbnail */}
              <div style={{ position: 'relative' }}>
                <AppPreviewThumb name={n} height={130} />
                {inst && (
                  <div style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}>
                    <Badge tone="success" dot>installed</Badge>
                  </div>
                )}
                {/* Hover preview hint */}
                <div className="p-lib-card-hint" style={{
                  position: 'absolute', inset: 0, zIndex: 2,
                  background: 'rgba(26,26,26,0.45)', color: 'white',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                  opacity: 0, transition: 'opacity 0.15s',
                  fontSize: 12, fontWeight: 600, letterSpacing: 0.02,
                  backdropFilter: 'blur(2px)',
                }}>
                  <I.external size={13} /> Open preview
                </div>
              </div>
              <div style={{ padding: 12, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--p-color-text-secondary)', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <span>{cat}</span>
                  <span>·</span>
                  <span title={`Lives on ${surfaceLabel}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                    {meta.surfaces.includes('admin') && <I.apps size={10} />}
                    {meta.surfaces.includes('storefront') && <I.store size={10} />}
                    {surfaceLabel}
                  </span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)', lineHeight: 1.45, minHeight: 34, marginBottom: 8 }}>
                  {d}
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
                  <Btn size="sm" style={{ flex: 1 }}
                    onClick={(e) => { e.stopPropagation(); setPreviewApp({ name: n, category: cat, installed: !!inst }); }}>
                    Preview
                  </Btn>
                  <Btn size="sm" variant={inst ? 'secondary' : 'primary'} style={{ flex: 1 }}
                    onClick={(e) => { e.stopPropagation(); inst ? navigate('creator/editor') : setPreviewApp({ name: n, category: cat, installed: false }); }}>
                    {inst ? 'Open' : 'Install'}
                  </Btn>
                </div>
              </div>
            </Card>
          );
        })}
      </div>}

      <style>{`
        .p-lib-card-hint { pointer-events: none; }
        [data-card]:hover .p-lib-card-hint, .p-card:hover .p-lib-card-hint { opacity: 1; }
      `}</style>

      {previewApp && (
        <AppPreviewDialog
          name={previewApp.name}
          category={previewApp.category}
          installed={previewApp.installed}
          onClose={() => setPreviewApp(null)}
          onOpenInEditor={() => { setPreviewApp(null); navigate('creator/editor'); }}
          onInstall={() => { setPreviewApp(null); navigate('creator/editor'); }}
        />
      )}
    </Page>
  );
}

// ─── Installed apps view (Library tab: Installed) ────────────────
const INSTALLED_APPS = [
  { name: 'Coupon Manager', version: 'v3', status: 'live', last: '50m ago', metric: '24 codes', metricSub: '+3 this week', category: 'Discounts', edits: 12, source: 'AI scaffold' },
  { name: 'Loyalty Hearts', version: 'v7', status: 'live', last: '2h ago', metric: '1,240 members', metricSub: '+42 this week', category: 'Retention', edits: 28, source: 'AI scaffold' },
  { name: 'Bundle Deals', version: 'v2', status: 'live', last: 'Yesterday', metric: '6 bundles', metricSub: '$1.2k attributed', category: 'Cross-sell', edits: 8, source: 'Starter · forked' },
  { name: 'Discount Stacker', version: 'v1', status: 'live', last: '15m ago', metric: '8 rules', metricSub: 'Pro variant', category: 'Discounts', edits: 4, source: 'AI · 30s' },
  { name: 'Spin to Win', version: 'v4', status: 'paused', last: '5d ago', metric: '412 spins', metricSub: 'Paused · inventory', category: 'Storefront', edits: 6, source: 'Starter' },
  { name: 'FAQ Block', version: 'v3', status: 'live', last: '1d ago', metric: '14 entries', metricSub: 'Mobile fix', category: 'Content', edits: 3, source: 'Starter' },
  { name: 'Curtain Call', version: 'v2', status: 'live', last: '4h ago', metric: 'Published', metricSub: '612 installs (others)', category: 'Marketing', edits: 5, source: 'AI · published', published: true },
];

function InstalledAppsView({ navigate }) {
  return (
    <div style={{ marginTop: 16 }}>
      <Card>
        <div className="p-table__head" style={{ gridTemplateColumns: '2.2fr 1fr 1.3fr 1.4fr 1fr 1fr 100px' }}>
          <div>App</div><div>Version</div><div>Status</div><div>Live metric</div><div>Source</div><div>Last edit</div><div></div>
        </div>
        {INSTALLED_APPS.map((a) => (
          <div key={a.name} className="p-table__row"
            style={{ gridTemplateColumns: '2.2fr 1fr 1.3fr 1.4fr 1fr 1fr 100px', cursor: 'pointer' }}
            onClick={() => navigate('operations')}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 7,
                background: 'var(--p-color-bg-fill-tertiary)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 600, fontSize: 12, flexShrink: 0,
              }}>{a.name[0]}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {a.name}
                  {a.published && <Badge tone="magic" style={{ marginLeft: 6, fontSize: 10 }}>Published</Badge>}
                </div>
                <div style={{ fontSize: 11, color: 'var(--p-color-text-secondary)' }}>{a.category}</div>
              </div>
            </div>
            <div className="p-mono" style={{ fontSize: 12, fontWeight: 600 }}>{a.version}</div>
            <div>
              <Badge tone={a.status === 'live' ? 'success' : a.status === 'paused' ? 'warning' : 'neutral'} dot>
                {a.status[0].toUpperCase() + a.status.slice(1)}
              </Badge>
            </div>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>{a.metric}</div>
              <div style={{ fontSize: 11, color: 'var(--p-color-text-secondary)' }}>{a.metricSub}</div>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>{a.source}</div>
            <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>{a.last}</div>
            <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
              <Btn size="sm" icon={I.edit} title="Edit" onClick={(e) => { e.stopPropagation(); navigate('creator/editor'); }} />
              <Btn variant="plain" size="sm" icon={I.more} onClick={(e) => e.stopPropagation()} />
            </div>
          </div>
        ))}
      </Card>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--p-color-text-secondary)', display: 'flex', alignItems: 'center', gap: 6 }}>
        Showing {INSTALLED_APPS.length} apps · <a style={{ color: 'var(--p-color-text-link)', cursor: 'pointer' }}>2 archived</a>
        <div style={{ flex: 1 }} />
        <Btn size="sm" icon={I.plus} onClick={() => navigate('marketplace')}>Install from marketplace</Btn>
      </div>
    </div>
  );
}

// ─── Drafts view (Library tab: Drafts) ────────────────────────────
function DraftsView({ navigate, openDraft }) {
  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
        {MY_DRAFTS.map((d) => (
          <Card key={d.id} onClick={() => openDraft(d.id)} style={{ padding: 14, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: d.color, color: 'white',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 17, flexShrink: 0,
              }}>{d.initial}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 14, fontWeight: 600 }}>{d.name}</span>
                  <Badge tone="magic" dot>v{d.versions} · Draft</Badge>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)', marginTop: 2 }}>
                  {d.createdBy} · {d.lastEdit}
                </div>
              </div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)', lineHeight: 1.5, fontStyle: 'italic' }}>
              "{d.prompt}"
            </div>
            <div style={{
              padding: '8px 10px',
              background: 'var(--p-color-bg-surface-secondary)',
              border: '1px solid var(--p-color-border-secondary)',
              borderRadius: 6,
              display: 'flex', gap: 12, fontSize: 11, color: 'var(--p-color-text-secondary)',
            }}>
              <span><b style={{ color: 'var(--p-color-text)' }}>{d.versions}</b> versions</span>
              <span><b style={{ color: 'var(--p-color-text)' }}>{d.prompts}</b> prompts</span>
              <span><b style={{ color: 'var(--p-color-text)' }}>{d.screens}</b> screens</span>
              <span><b style={{ color: 'var(--p-color-text)' }}>{d.files}</b> files</span>
              <div style={{ flex: 1 }} />
              <span className="p-mono">{d.direction}</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <Btn size="sm" icon={I.wand} style={{ flex: 1 }} onClick={(e) => { e.stopPropagation(); navigate('creator/editor'); }}>Edit</Btn>
              <Btn size="sm" variant="primary" style={{ flex: 1 }} onClick={(e) => { e.stopPropagation(); openDraft(d.id); }}>Open</Btn>
              {d.publishable && <Btn size="sm" variant="magic" icon={I.sparkle} onClick={(e) => { e.stopPropagation(); navigate('creator/publish'); }}>Publish</Btn>}
            </div>
          </Card>
        ))}

        {/* New draft CTA */}
        <Card onClick={() => navigate('creator/new')} style={{
          padding: 14, cursor: 'pointer',
          borderStyle: 'dashed', borderColor: 'var(--p-color-border-magic)',
          background: 'var(--p-color-bg-fill-magic)',
          color: 'var(--p-color-text-magic)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          minHeight: 200,
        }}>
          <I.sparkle size={18} />
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Start a new draft with AI</div>
            <div style={{ fontSize: 11.5, opacity: 0.85 }}>Describe what you need · ~30s to v1</div>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { RouteHome, RouteOperations, RouteCouponApp, RouteLibrary, LIBRARY, InstalledAppsView, DraftsView, INSTALLED_APPS });