/* ============================================================
   Bizia — Pages  (/app/pages)
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, PageHeader, StatusBadge } = window;

  function PageThumb({ pg, accent = '#FF8A5B' }) {
    return React.createElement('div', { style: { height: 110, position: 'relative', background: 'linear-gradient(150deg,' + accent + '18,' + accent + '05)', borderBottom: '1px solid var(--border-soft)', overflow: 'hidden' } },
      React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg,' + accent + '12 0 1px, transparent 1px 10px)' } }),
      React.createElement('div', { style: { position: 'absolute', left: 14, right: 14, top: 12, bottom: -2, borderRadius: '8px 8px 0 0', background: 'var(--surface)', border: '1px solid var(--border)', borderBottom: 'none', boxShadow: 'var(--sh-sm)', padding: 9, overflow: 'hidden' } },
        React.createElement('div', { style: { height: 16, borderRadius: 5, background: accent, opacity: 0.85, marginBottom: 7 } }),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 5 } }, [70, 90, 55].map((w, i) => React.createElement('div', { key: i, style: { height: 6, width: w + '%', borderRadius: 3, background: 'var(--surface-3)' } })))),
    );
  }

  function PagesPage() {
    const data = window.DATA;
    const [prompt, setPrompt] = useState('');
    const [pages, setPages] = useState(data.pages);
    const seoTone = { ready: ['success', 'SEO ready'], partial: ['warning', 'SEO partial'], missing: ['danger', 'No SEO'] };

    // Hash-routed SPA — the ?project= query string lives inside
    // window.location.hash, not window.location.search (which is always
    // empty here). Reading .search silently fell back to a mock project.
    const projectId = new URLSearchParams(window.location.hash.split('?')[1] || '').get('project') || data.projects?.[0]?.id;

    useEffect(() => {
      if (!projectId) return;
      window.API.pages.list(projectId).then(list => { if (list && list.length) setPages(list); }).catch(() => {});
    }, [projectId]);

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        icon: 'folder', title: 'Pages',
        sub: 'Every page on your website. Edit any page in the builder, or describe a new page and Bizia will generate it.',
      }),
      // add page from prompt
      React.createElement(Card, { pad: 16, style: { marginBottom: 22, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
        React.createElement('div', { style: { width: 38, height: 38, borderRadius: 10, background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: 'sparkles', size: 19 })),
        React.createElement('input', { value: prompt, onChange: (e) => setPrompt(e.target.value), onKeyDown: (e) => e.key === 'Enter' && prompt && window.toast({ title: 'Generating page', desc: prompt, tone: 'primary' }), placeholder: 'Describe a new page — e.g. “A catering page with a quote form”', style: { flex: 1, minWidth: 200, border: 'none', outline: 'none', background: 'transparent', fontSize: 14.5, color: 'var(--text)' } }),
        React.createElement(Button, { variant: 'primary', icon: 'plus', onClick: async () => {
          if (!prompt.trim()) return;
          window.toast({ title: 'Generating page', desc: prompt, tone: 'primary' });
          const result = await window.API.pages.create(projectId, { prompt });
          if (result) setPages(prev => [...prev, result]);
        } }, 'Generate page'),
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(260px,1fr))', gap: 16 } },
        pages.map(pg => {
          const [tone, lbl] = seoTone[pg.seo];
          return React.createElement(Card, { key: pg.id, hover: true, pad: 0, style: { overflow: 'hidden', cursor: 'pointer' }, onClick: () => window.navigate('/app/builder') },
            React.createElement('div', { style: { position: 'relative' } },
              React.createElement(PageThumb, { pg }),
              React.createElement('div', { style: { position: 'absolute', top: 10, right: 10 } }, React.createElement(StatusBadge, { status: pg.status, size: 'sm' }))),
            React.createElement('div', { style: { padding: 15 } },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9 } },
                React.createElement('div', { style: { width: 28, height: 28, borderRadius: 8, background: 'var(--surface-3)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: pg.icon, size: 15 })),
                React.createElement('div', { style: { flex: 1, minWidth: 0 } },
                  React.createElement('div', { style: { fontSize: 14.5, fontWeight: 650 } }, pg.name),
                  React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)', fontFamily: 'var(--font-mono)' } }, pg.path))),
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, flexWrap: 'wrap' } },
                React.createElement(Badge, { tone: 'neutral', size: 'sm', icon: 'layers' }, pg.sections + ' sections'),
                React.createElement(Badge, { tone, size: 'sm' }, lbl)),
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-soft)' } },
                React.createElement('span', { style: { fontSize: 11.5, color: 'var(--muted-2)' } }, 'Edited ' + pg.updated),
                React.createElement('span', { style: { fontSize: 12.5, color: 'var(--primary)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 } }, 'Edit', React.createElement(Icon, { name: 'arrowRight', size: 13 })))));
        }),
        // add card
        React.createElement('button', { onClick: () => window.toast({ title: 'New page', desc: 'Describe it above to generate.', tone: 'info' }),
          style: { minHeight: 240, borderRadius: 'var(--r-lg)', border: '1.5px dashed var(--border-strong)', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, color: 'var(--muted)' },
          onMouseEnter: (e) => { e.currentTarget.style.borderColor = 'var(--primary)'; e.currentTarget.style.color = 'var(--primary)'; },
          onMouseLeave: (e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.color = 'var(--muted)'; } },
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: 12, background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: 'plus', size: 22 })),
          React.createElement('span', { style: { fontSize: 14, fontWeight: 600 } }, 'Add a page')),
      ),
    );
  }

  window.PagesPage = PagesPage;
})();