/* ============================================================
   Bizia — Template gallery  (/app/templates)
   ============================================================ */
(function () {
  const { useState, useMemo } = React;
  const { Card, Badge, Button, Icon, Chip, Modal, PageHeader, Segmented, EmptyState } = window;

  function TemplatePreview({ t, big }) {
    return React.createElement('div', { style: { height: big ? 280 : 150, borderRadius: big ? 'var(--r-lg)' : 0, background: 'linear-gradient(150deg,' + t.accent + '18,' + t.accent + '05)', position: 'relative', overflow: 'hidden' } },
      React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg,' + t.accent + '12 0 1px, transparent 1px 11px)' } }),
      // mock browser
      React.createElement('div', { style: { position: 'absolute', inset: big ? 24 : 14, borderRadius: 10, background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--sh-md)', overflow: 'hidden', display: 'flex', flexDirection: 'column' } },
        React.createElement('div', { style: { height: big ? 30 : 20, background: 'var(--surface-2)', borderBottom: '1px solid var(--border-soft)', display: 'flex', alignItems: 'center', gap: 4, padding: '0 8px' } },
          [0, 1, 2].map(i => React.createElement('span', { key: i, style: { width: big ? 7 : 5, height: big ? 7 : 5, borderRadius: 999, background: 'var(--border-strong)' } }))),
        React.createElement('div', { style: { flex: 1, padding: big ? 16 : 10 } },
          React.createElement('div', { style: { height: big ? 56 : 32, borderRadius: 8, background: t.accent, opacity: 0.9, marginBottom: big ? 12 : 7, display: 'flex', alignItems: 'center', padding: '0 14px' } },
            React.createElement('div', { style: { width: '40%', height: big ? 12 : 7, borderRadius: 4, background: 'rgba(255,255,255,0.7)' } })),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: big ? 10 : 6 } },
            [0, 1, 2].map(i => React.createElement('div', { key: i, style: { height: big ? 50 : 28, borderRadius: 7, background: 'var(--surface-3)' } }))),
          big ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 7, marginTop: 14 } },
            [80, 60, 70].map((w, i) => React.createElement('div', { key: i, style: { height: 8, width: w + '%', borderRadius: 4, background: 'var(--surface-3)' } }))) : null,
        ),
      ),
    );
  }

  function TemplateCard({ t, onPreview, onChoose }) {
    return React.createElement(Card, { hover: true, pad: 0, style: { overflow: 'hidden' } },
      React.createElement('div', { style: { position: 'relative' } },
        React.createElement(TemplatePreview, { t }),
        React.createElement('div', { style: { position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6 } },
          t.recommended ? React.createElement(Badge, { tone: 'primary', icon: 'sparkles', size: 'sm' }, 'Recommended') : null,
          t.premium ? React.createElement(Badge, { tone: 'accent', icon: 'star', size: 'sm' }, 'Premium') : null,
        ),
      ),
      React.createElement('div', { style: { padding: 16 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
          React.createElement('h4', { style: { fontSize: 15.5, fontWeight: 650 } }, t.name),
          React.createElement('span', { style: { fontSize: 12, color: 'var(--muted)' } }, t.category),
        ),
        React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 } },
          t.tags.map(tag => React.createElement('span', { key: tag, style: { fontSize: 11.5, color: 'var(--muted)', padding: '3px 8px', borderRadius: 999, background: 'var(--surface-3)' } }, tag))),
        React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 14 } },
          React.createElement(Button, { variant: 'outline', size: 'sm', icon: 'eye', onClick: () => onPreview(t), style: { flex: 1 } }, 'Preview'),
          React.createElement(Button, { variant: 'primary', size: 'sm', onClick: () => onChoose(t), style: { flex: 1 } }, 'Use'),
        ),
      ),
    );
  }

  function TemplatesPage() {
    const data = window.DATA;
    const [q, setQ] = useState('');
    const [cat, setCat] = useState('All');
    const [feat, setFeat] = useState([]);
    const [preview, setPreview] = useState(null);

    const toggleFeat = (f) => setFeat(prev => prev.includes(f) ? prev.filter(x => x !== f) : [...prev, f]);
    function choose(t) { window.toast({ title: 'Template selected', desc: t.name + ' — opening builder.', tone: 'success' }); window.navigate('/app/builder'); }

    const filtered = useMemo(() => data.templates.filter(t => {
      if (q && !(t.name + ' ' + t.category + ' ' + t.tags.join(' ')).toLowerCase().includes(q.toLowerCase())) return false;
      if (cat !== 'All' && t.category !== cat) return false;
      if (feat.length && !feat.every(f => t.features.includes(f))) return false;
      return true;
    }), [q, cat, feat]);
    const recommended = data.templates.filter(t => t.recommended);

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        title: 'Templates', sub: 'Start from a polished, business-ready design — or build from scratch. You can change everything later.',
        actions: React.createElement(Button, { variant: 'outline', icon: 'wand', onClick: () => choose({ name: 'Blank canvas' }) }, 'Start from scratch'),
      }),

      // Recommended strip
      (!q && cat === 'All' && !feat.length) ? React.createElement('div', { style: { marginBottom: 28 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 } },
          React.createElement(Icon, { name: 'sparkles', size: 18, style: { color: 'var(--primary)' } }),
          React.createElement('h3', { style: { fontSize: 16, fontWeight: 650 } }, 'Recommended for your business'),
          React.createElement(Badge, { tone: 'secondary', size: 'sm' }, 'Based on your plan'),
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(250px,1fr))', gap: 16 } },
          recommended.map(t => React.createElement(TemplateCard, { key: t.id, t, onPreview: setPreview, onChoose: choose })),
        ),
      ) : null,

      // Filters
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 20 } },
        React.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' } },
          React.createElement('div', { style: { flex: 1, minWidth: 220, display: 'flex', alignItems: 'center', gap: 9, height: 42, padding: '0 14px', borderRadius: 'var(--r-md)', background: 'var(--surface)', border: '1px solid var(--border-strong)' } },
            React.createElement(Icon, { name: 'search', size: 17, style: { color: 'var(--muted)' } }),
            React.createElement('input', { value: q, onChange: (e) => setQ(e.target.value), placeholder: 'Search templates…', style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, color: 'var(--text)' } }),
          ),
          React.createElement('span', { style: { fontSize: 13, color: 'var(--muted)' } }, filtered.length + ' templates'),
        ),
        React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
          React.createElement(Chip, { active: cat === 'All', onClick: () => setCat('All') }, 'All'),
          data.templateCategories.map(c => React.createElement(Chip, { key: c, active: cat === c, onClick: () => setCat(c) }, c)),
        ),
        React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' } },
          React.createElement('span', { style: { fontSize: 12.5, color: 'var(--muted)', fontWeight: 600, marginRight: 4 } }, 'Features:'),
          data.templateFeatures.map(f => React.createElement(Chip, { key: f, active: feat.includes(f), icon: feat.includes(f) ? 'check' : null, onClick: () => toggleFeat(f) }, f)),
        ),
      ),

      // Grid
      filtered.length ? React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(250px,1fr))', gap: 16 } },
        filtered.map(t => React.createElement(TemplateCard, { key: t.id, t, onPreview: setPreview, onChoose: choose })),
      ) : React.createElement(EmptyState, { icon: 'search', title: 'No templates match', desc: 'Try clearing some filters or starting from a blank canvas.', action: React.createElement(Button, { variant: 'outline', onClick: () => { setQ(''); setCat('All'); setFeat([]); } }, 'Clear filters') }),

      // Preview modal
      React.createElement(Modal, { open: !!preview, onClose: () => setPreview(null), width: 720, pad: 0 },
        preview ? React.createElement('div', null,
          React.createElement('div', { style: { padding: 20 } }, React.createElement(TemplatePreview, { t: preview, big: true })),
          React.createElement('div', { style: { padding: '0 24px 24px' } },
            React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 } },
              React.createElement('div', null,
                React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
                  React.createElement('h2', { style: { fontSize: 22, fontWeight: 700 } }, preview.name),
                  preview.recommended ? React.createElement(Badge, { tone: 'primary', icon: 'sparkles', size: 'sm' }, 'Recommended') : null),
                React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 5 } }, preview.category + ' template · Best for ' + preview.pairs),
              ),
              React.createElement(window.IconButton, { name: 'x', label: 'Close', onClick: () => setPreview(null) }),
            ),
            React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 14 } },
              preview.tags.map(t => React.createElement(Badge, { key: t, tone: 'neutral' }, t)),
              preview.features.map(f => React.createElement(Badge, { key: f, tone: 'secondary', icon: 'check' }, f)),
            ),
            React.createElement('div', { style: { display: 'flex', gap: 10, marginTop: 22 } },
              React.createElement(Button, { variant: 'outline', icon: 'externalLink', style: { flex: 1 }, onClick: () => window.toast({ title: 'Live preview', desc: 'Mocked in this prototype.', tone: 'info' }) }, 'Open live preview'),
              React.createElement(Button, { variant: 'primary', icon: 'check', style: { flex: 1 }, onClick: () => choose(preview) }, 'Use this template'),
            ),
          ),
        ) : null,
      ),

      // Continue without template
      React.createElement(Card, { pad: 22, style: { marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', background: 'var(--surface-2)' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } },
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: 12, background: 'var(--surface-3)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: 'wand', size: 22 })),
          React.createElement('div', null,
            React.createElement('h4', { style: { fontSize: 15.5, fontWeight: 650 } }, 'Prefer to start from scratch?'),
            React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 3 } }, 'Skip templates and let Bizia design from your prompt in scratch mode.'),
          ),
        ),
        React.createElement(Button, { variant: 'dark', iconRight: 'arrowRight', onClick: () => choose({ name: 'Blank canvas' }) }, 'Continue without template'),
      ),
    );
  }

  window.TemplatesPage = TemplatesPage;
})();