// Post Creator Panel - Criador de Posts Manual
const TEMPLATES = [
  { label: '🔥 Noticia Quente',  text: '🔥 URGENTE: {titulo} - Confira na integra!' },
  { label: '🤔 Curiosidade',     text: '🤔 Voce sabia? {titulo} #Curiosidade #Trending' },
  { label: '💡 Dica do Dia',     text: '💡 DICA: {titulo} - Salva ai para consultar depois! #Dica' },
  { label: '⚡ Breaking News',   text: '⚡ BREAKING: {titulo} - O que mudou? Leia agora!' },
  { label: '💬 Debate',          text: '💬 E ai, o que voce acha? {titulo} - Deixa teu comentario!' },
];

function formatDate(dateStr) {
  if (!dateStr) return '–';
  try {
    const d = new Date(dateStr);
    return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
  } catch (e) { return '–'; }
}

function statusBadge(status) {
  const map = {
    pending:   { label: 'Pendente',  cls: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/40' },
    published: { label: 'Publicado', cls: 'bg-green-500/20 text-green-400 border-green-500/40' },
    failed:    { label: 'Falhou',    cls: 'bg-red-500/20 text-red-400 border-red-500/40' },
    approved:  { label: 'Aprovado',  cls: 'bg-blue-500/20 text-blue-400 border-blue-500/40' },
  };
  const s = map[status] || { label: status || '?', cls: 'bg-gray-500/20 text-gray-400 border-gray-500/40' };
  return React.createElement('span', {
    className: 'inline-block px-2 py-0.5 rounded-full text-xs font-semibold border ' + s.cls
  }, s.label);
}

const PostCreatorPanel = ({ importData } = {}) => {
  const [title, setTitle]               = React.useState('');
  const [imageUrl, setImageUrl]         = React.useState('');
  const [hashtags, setHashtags]         = React.useState('');
  const [posts, setPosts]               = React.useState([]);
  const [stats, setStats]               = React.useState({ total: 0, pending: 0, published: 0 });
  const [loading, setLoading]           = React.useState(false);
  const [message, setMessage]           = React.useState('');
  const [imgError, setImgError]         = React.useState(false);
  const [selectedTemplate, setSelectedTemplate] = React.useState('');
  const lastImportRef = React.useRef(null);

  // Edit modal state
  const [editPost, setEditPost]         = React.useState(null);
  const [editCaption, setEditCaption]   = React.useState('');
  const [editHashtags, setEditHashtags] = React.useState('');
  const [editSaving, setEditSaving]     = React.useState(false);

  // Telegram publish loading per post
  const [publishingIds, setPublishingIds] = React.useState({});

  React.useEffect(() => {
    fetchStats();
    fetchPosts();
    const interval = setInterval(() => { fetchStats(); fetchPosts(); }, 10000);
    return () => clearInterval(interval);
  }, []);

  React.useEffect(() => {
    if (!importData) return;
    const key = (importData.title || '') + '|' + (importData.imageUrl || '');
    if (lastImportRef.current === key) return;
    lastImportRef.current = key;
    setTitle(importData.title || '');
    setImageUrl(importData.imageUrl || '');
    setHashtags(importData.hashtags || '');
    setImgError(false);
    setMessage('✅ Artigo importado! Configure e publique.');
    setTimeout(() => setMessage(''), 5000);
  }, [importData]);

  React.useEffect(() => { setImgError(false); }, [imageUrl]);

  const fetchStats = async () => {
    try {
      const res = await fetch('/api/instagram/queue-stats');
      const data = await res.json();
      if (data.success) setStats(data.stats);
    } catch (err) { console.error(err); }
  };

  const fetchPosts = async () => {
    try {
      const res = await fetch('/api/instagram/queue?limit=10');
      const data = await res.json();
      if (data.success) setPosts(data.posts || []);
    } catch (err) { console.error(err); }
  };

  const handleTemplateSelect = (e) => {
    const idx = e.target.value;
    setSelectedTemplate(idx);
    if (idx === '') return;
    const tpl = TEMPLATES[parseInt(idx)];
    const base = title.trim() || 'titulo aqui';
    setTitle(tpl.text.replace('{titulo}', base));
    e.target.value = '';
    setSelectedTemplate('');
  };

  const handleCreatePost = async () => {
    if (!title.trim() || !imageUrl.trim()) { setMessage('Preencha titulo e URL da imagem!'); return; }
    setLoading(true);
    try {
      const res = await fetch('/api/instagram/create-post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title, imageUrl, hashtags })
      });
      const data = await res.json();
      if (data.success) {
        setMessage('Post criado! ID: ' + data.postId);
        setTitle(''); setImageUrl(''); setHashtags('');
        await fetch('/api/instagram/send-telegram-preview', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ postId: data.postId, title, imageUrl })
        });
        setTimeout(() => { fetchStats(); fetchPosts(); }, 500);
      } else { setMessage('Erro: ' + data.error); }
    } catch (err) { setMessage('Erro: ' + err.message); }
    finally { setLoading(false); setTimeout(() => setMessage(''), 3000); }
  };

  const handleApprovePost = async (postId) => {
    try {
      const res = await fetch('/api/instagram/approve-post/' + postId, {
        method: 'POST', headers: { 'Content-Type': 'application/json' }
      });
      const data = await res.json();
      if (data.success) { setMessage('Post aprovado!'); fetchPosts(); setTimeout(() => setMessage(''), 2000); }
    } catch (err) { setMessage('Erro: ' + err.message); }
  };

  const handleDeletePost = async (postId) => {
    if (!confirm('Deletar este post?')) return;
    try {
      const res = await fetch('/api/instagram/post/' + postId, { method: 'DELETE' });
      const data = await res.json();
      if (data.success) { setMessage('Post deletado!'); fetchPosts(); setTimeout(() => setMessage(''), 2000); }
    } catch (err) { setMessage('Erro: ' + err.message); }
  };

  const handlePublishToTelegram = async (post) => {
    setPublishingIds(prev => ({ ...prev, [post.id]: true }));
    try {
      const res = await fetch('/api/instagram/send-telegram-preview', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ postId: post.id, title: post.caption, imageUrl: post.imageUrl })
      });
      const data = await res.json();
      if (data.success) {
        await fetch('/api/instagram/post/' + post.id, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ status: 'published' })
        });
        setMessage('✅ Enviado pro Telegram! Post #' + post.id);
        fetchPosts();
        setTimeout(() => setMessage(''), 3000);
      } else {
        setMessage('Erro ao enviar: ' + (data.error || 'falha desconhecida'));
        setTimeout(() => setMessage(''), 4000);
      }
    } catch (err) {
      setMessage('Erro ao enviar: ' + err.message);
      setTimeout(() => setMessage(''), 4000);
    } finally {
      setPublishingIds(prev => { const n = { ...prev }; delete n[post.id]; return n; });
    }
  };

  const openEditModal = (post) => {
    setEditPost(post);
    setEditCaption(post.caption || '');
    setEditHashtags(post.hashtags || '');
  };

  const closeEditModal = () => {
    setEditPost(null);
    setEditCaption('');
    setEditHashtags('');
  };

  const handleEditSave = async () => {
    if (!editPost) return;
    setEditSaving(true);
    try {
      const res = await fetch('/api/instagram/post/' + editPost.id, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ caption: editCaption, hashtags: editHashtags })
      });
      const data = await res.json();
      if (data.success) {
        setMessage('Post atualizado com sucesso!');
        closeEditModal();
        fetchPosts();
        setTimeout(() => setMessage(''), 2500);
      } else { setMessage('Erro: ' + data.error); }
    } catch (err) { setMessage('Erro: ' + err.message); }
    finally { setEditSaving(false); }
  };

  const showPreview = imageUrl.trim() !== '' && !imgError;

  // ── Edit Modal ────────────────────────────────────────────────────
  const editModal = editPost && React.createElement('div', {
    className: 'fixed inset-0 z-50 flex items-center justify-center p-4',
    style: { background: 'rgba(0,0,0,0.80)', backdropFilter: 'blur(6px)' },
    onClick: (e) => { if (e.target === e.currentTarget) closeEditModal(); }
  },
    React.createElement('div', {
      className: 'bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-xl shadow-2xl flex flex-col',
      style: { maxHeight: '90vh' }
    },
      // Header
      React.createElement('div', { className: 'flex items-center justify-between px-6 py-4 border-b border-gray-700 flex-shrink-0' },
        React.createElement('h3', { className: 'text-base font-bold text-white' }, '✏️ Editar Post  #' + editPost.id),
        React.createElement('button', {
          onClick: closeEditModal,
          className: 'text-gray-400 hover:text-white text-2xl leading-none w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-800'
        }, '×')
      ),
      // Scrollable body
      React.createElement('div', { className: 'overflow-y-auto flex-1 p-6 space-y-5' },
        // Imagem grande
        editPost.imageUrl && React.createElement('div', {
          className: 'rounded-xl overflow-hidden border border-gray-700 bg-gray-800'
        },
          React.createElement('img', {
            src: editPost.imageUrl,
            alt: 'post image',
            onError: (e) => { e.target.parentElement.style.display = 'none'; },
            style: { width: '100%', maxHeight: '280px', objectFit: 'cover', display: 'block' }
          })
        ),
        // Legenda
        React.createElement('div', null,
          React.createElement('label', { className: 'block text-sm font-semibold text-gray-300 mb-2' }, 'Titulo / Legenda'),
          React.createElement('textarea', {
            value: editCaption,
            onChange: (e) => setEditCaption(e.target.value),
            rows: 5,
            className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none resize-none',
            placeholder: 'Legenda do post...'
          }),
          React.createElement('p', { className: 'text-xs text-gray-600 mt-1' }, editCaption.length + ' caracteres')
        ),
        // Hashtags
        React.createElement('div', null,
          React.createElement('label', { className: 'block text-sm font-semibold text-gray-300 mb-2' }, 'Hashtags'),
          React.createElement('input', {
            type: 'text',
            value: editHashtags,
            onChange: (e) => setEditHashtags(e.target.value),
            className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none',
            placeholder: '#trending #brasil'
          })
        ),
        // Hashtag pills preview
        editHashtags.trim() && React.createElement('div', { className: 'flex flex-wrap gap-2' },
          editHashtags.trim().split(/\s+/).filter(Boolean).map((tag, i) =>
            React.createElement('span', {
              key: i,
              className: 'bg-purple-500/15 text-purple-400 px-3 py-1 rounded-full text-xs border border-purple-500/30'
            }, tag)
          )
        )
      ),
      // Footer
      React.createElement('div', { className: 'flex gap-3 px-6 py-4 border-t border-gray-700 flex-shrink-0' },
        React.createElement('button', {
          onClick: handleEditSave,
          disabled: editSaving,
          className: 'flex-1 btn-grad text-white font-semibold py-3 rounded-xl disabled:opacity-50 transition-opacity'
        }, editSaving ? '⏳ Salvando...' : '💾 Salvar Mudanças'),
        React.createElement('button', {
          onClick: closeEditModal,
          className: 'flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 rounded-xl transition-colors'
        }, 'Cancelar')
      )
    )
  );

  // ── Preview card ──────────────────────────────────────────────────
  const previewCard = React.createElement('div', { className: 'card p-6 sticky top-6' },
    React.createElement('h3', { className: 'text-lg font-semibold mb-4' }, 'Preview do Post'),
    React.createElement('div', { className: 'rounded-xl overflow-hidden border border-gray-700 bg-gray-900' },
      showPreview
        ? React.createElement('img', {
            src: imageUrl,
            alt: 'preview',
            onError: () => setImgError(true),
            style: { width: '100%', aspectRatio: '1/1', objectFit: 'cover', display: 'block' }
          })
        : React.createElement('div', {
            style: { width: '100%', aspectRatio: '1/1', display: 'flex', alignItems: 'center', justifyContent: 'center' },
            className: 'bg-gray-800'
          },
            React.createElement('div', { className: 'text-center text-gray-600' },
              React.createElement('div', { style: { fontSize: '2.5rem' } }, '🖼️'),
              React.createElement('p', { className: 'text-xs mt-2' }, imgError ? 'URL invalida' : 'Aguardando URL...')
            )
          )
    ),
    React.createElement('div', { className: 'mt-3 space-y-1' },
      React.createElement('p', { className: 'text-sm font-semibold text-white leading-snug' },
        title.trim() || React.createElement('span', { className: 'text-gray-600 italic' }, 'Titulo aparece aqui...')
      ),
      React.createElement('p', { className: 'text-xs text-blue-400' },
        hashtags.trim() || React.createElement('span', { className: 'text-gray-700 italic' }, '#hashtags aqui...')
      )
    )
  );

  // ── Main render ───────────────────────────────────────────────────
  return React.createElement('div', { className: 'space-y-6' },
    editModal,

    React.createElement('div', { className: 'flex items-center justify-between' },
      React.createElement('h2', { className: 'text-2xl font-bold' }, 'Criador de Posts'),
      React.createElement('div', { className: 'text-sm text-gray-400' }, stats.total + ' posts na fila')
    ),

    message && React.createElement('div', {
      className: 'p-4 rounded-lg ' + (message.includes('Erro') ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400')
    }, message),

    React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-3 gap-6' },
      // Formulario
      React.createElement('div', null,
        React.createElement('div', { className: 'card p-6' },
          React.createElement('h3', { className: 'text-lg font-semibold mb-4' }, 'Novo Post'),
          React.createElement('div', { className: 'space-y-4' },
            React.createElement('div', null,
              React.createElement('label', { className: 'block text-sm font-semibold mb-2' }, 'Template de Legenda'),
              React.createElement('select', {
                value: selectedTemplate,
                onChange: handleTemplateSelect,
                className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white focus:border-purple-500 focus:outline-none cursor-pointer'
              },
                React.createElement('option', { value: '' }, '— Selecione um template —'),
                TEMPLATES.map((tpl, idx) =>
                  React.createElement('option', { key: idx, value: idx }, tpl.label + '  →  ' + tpl.text.replace('{titulo}', '...'))
                )
              )
            ),
            React.createElement('div', null,
              React.createElement('label', { className: 'block text-sm font-semibold mb-2' }, 'Titulo / Legenda'),
              React.createElement('textarea', {
                value: title,
                onChange: (e) => setTitle(e.target.value),
                placeholder: 'Digite o titulo ou selecione um template acima...',
                className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none min-h-24'
              })
            ),
            React.createElement('div', null,
              React.createElement('label', { className: 'block text-sm font-semibold mb-2' }, 'URL da Imagem'),
              React.createElement('input', {
                type: 'url',
                value: imageUrl,
                onChange: (e) => setImageUrl(e.target.value),
                placeholder: 'https://exemplo.com/imagem.jpg',
                className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none'
              })
            ),
            React.createElement('div', null,
              React.createElement('label', { className: 'block text-sm font-semibold mb-2' }, 'Hashtags'),
              React.createElement('input', {
                type: 'text',
                value: hashtags,
                onChange: (e) => setHashtags(e.target.value),
                placeholder: '#trending #brasil',
                className: 'w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none'
              })
            ),
            React.createElement('div', { className: 'flex gap-3' },
              React.createElement('button', {
                onClick: handleCreatePost,
                disabled: loading,
                className: 'flex-1 btn-grad text-white font-semibold py-3 rounded-lg disabled:opacity-50'
              }, loading ? 'Criando...' : 'Criar Post'),
              React.createElement('button', {
                onClick: () => { setTitle(''); setImageUrl(''); setHashtags(''); setSelectedTemplate(''); },
                className: 'flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 rounded-lg'
              }, 'Limpar')
            )
          )
        )
      ),
      // Preview
      React.createElement('div', null, previewCard),
      // Status da fila
      React.createElement('div', null,
        React.createElement('div', { className: 'card p-6 space-y-4' },
          React.createElement('h3', { className: 'text-lg font-semibold mb-4' }, 'Status da Fila'),
          React.createElement('div', { className: 'space-y-3' },
            React.createElement('div', { className: 'bg-purple-500/20 border border-purple-500/50 rounded-lg p-4' },
              React.createElement('p', { className: 'text-xs text-gray-400 mb-1' }, 'Total'),
              React.createElement('p', { className: 'text-3xl font-bold text-purple-400' }, stats.total)
            ),
            React.createElement('div', { className: 'bg-yellow-500/20 border border-yellow-500/50 rounded-lg p-4' },
              React.createElement('p', { className: 'text-xs text-gray-400 mb-1' }, 'Pendentes'),
              React.createElement('p', { className: 'text-3xl font-bold text-yellow-400' }, stats.pending)
            ),
            React.createElement('div', { className: 'bg-green-500/20 border border-green-500/50 rounded-lg p-4' },
              React.createElement('p', { className: 'text-xs text-gray-400 mb-1' }, 'Publicados'),
              React.createElement('p', { className: 'text-3xl font-bold text-green-400' }, stats.published)
            )
          )
        )
      )
    ),

    // ── Posts Recentes ────────────────────────────────────────────────
    React.createElement('div', { className: 'card p-6' },
      React.createElement('div', { className: 'flex items-center justify-between mb-5' },
        React.createElement('h3', { className: 'text-lg font-semibold' }, 'Posts Recentes'),
        React.createElement('span', { className: 'text-xs text-gray-500 bg-gray-800 px-3 py-1 rounded-full' },
          posts.length + ' posts'
        )
      ),
      posts.length === 0
        ? React.createElement('div', { className: 'flex flex-col items-center justify-center py-16 text-gray-600' },
            React.createElement('div', { style: { fontSize: '3rem' }, className: 'mb-3' }, '📭'),
            React.createElement('p', { className: 'text-sm' }, 'Nenhum post na fila')
          )
        : React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' },
            posts.map(post =>
              React.createElement('div', {
                key: post.id,
                className: 'bg-gray-800/60 border border-gray-700/80 rounded-xl overflow-hidden flex flex-col hover:border-gray-600 transition-colors group'
              },
                // Thumbnail area
                React.createElement('div', {
                  className: 'relative bg-gray-850 overflow-hidden flex-shrink-0',
                  style: { aspectRatio: '16/9', background: '#1a1a2e' }
                },
                  // Fallback behind image
                  React.createElement('div', {
                    style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' },
                    className: 'bg-gray-800/80'
                  },
                    React.createElement('span', { style: { fontSize: '2rem', opacity: 0.4 } }, '🖼️')
                  ),
                  // Image on top (hides itself on error, fallback shows through)
                  post.imageUrl && React.createElement('img', {
                    src: post.imageUrl,
                    alt: 'thumbnail',
                    onError: (e) => { e.target.style.display = 'none'; },
                    style: {
                      position: 'absolute', inset: 0,
                      width: '100%', height: '100%',
                      objectFit: 'cover', display: 'block',
                      transition: 'transform 0.3s ease'
                    },
                    className: 'group-hover:scale-105'
                  }),
                  // Status badge overlay
                  React.createElement('div', { className: 'absolute top-2 right-2' },
                    statusBadge(post.status)
                  )
                ),

                // Card body
                React.createElement('div', { className: 'p-4 flex flex-col gap-3 flex-1' },
                  // ID + data
                  React.createElement('div', { className: 'flex items-center justify-between' },
                    React.createElement('span', {
                      className: 'text-xs text-gray-500 bg-gray-700/60 px-2 py-0.5 rounded font-mono'
                    }, '#' + post.id),
                    React.createElement('span', { className: 'text-xs text-gray-500' },
                      formatDate(post.createdAt)
                    )
                  ),

                  // Caption preview
                  React.createElement('p', { className: 'text-sm text-gray-200 leading-snug flex-1' },
                    post.caption
                      ? (post.caption.length > 80 ? post.caption.substring(0, 80) + '…' : post.caption)
                      : React.createElement('span', { className: 'text-gray-600 italic' }, 'Sem legenda')
                  ),

                  // Hashtags chips
                  post.hashtags && post.hashtags.trim()
                    ? React.createElement('div', { className: 'flex flex-wrap gap-1.5' },
                        post.hashtags.trim().split(/\s+/).filter(Boolean).slice(0, 4).map((tag, i) =>
                          React.createElement('span', {
                            key: i,
                            className: 'text-xs text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-full border border-blue-500/20'
                          }, tag)
                        ),
                        post.hashtags.trim().split(/\s+/).filter(Boolean).length > 4 &&
                          React.createElement('span', { className: 'text-xs text-gray-500 self-center' },
                            '+' + (post.hashtags.trim().split(/\s+/).filter(Boolean).length - 4) + ' mais'
                          )
                      )
                    : React.createElement('p', { className: 'text-xs text-gray-600 italic' }, 'Sem hashtags'),

                  // Action buttons
                  React.createElement('div', { className: 'flex flex-col gap-2 pt-1 border-t border-gray-700/50' },
                    // Publicar Agora — full-width, destaque azul Telegram
                    React.createElement('button', {
                      onClick: () => handlePublishToTelegram(post),
                      disabled: !!publishingIds[post.id],
                      title: 'Clique para enviar direto pro Telegram',
                      className: 'w-full flex items-center justify-center gap-2 bg-blue-600/80 hover:bg-blue-600 disabled:opacity-60 disabled:cursor-not-allowed text-white text-xs font-bold py-2.5 rounded-lg transition-colors'
                    },
                      publishingIds[post.id]
                        ? React.createElement('span', {
                            style: { display: 'inline-block', animation: 'spin 0.8s linear infinite', fontSize: '0.9rem' }
                          }, '⟳')
                        : React.createElement('span', { style: { fontSize: '0.9rem' } }, '📤'),
                      publishingIds[post.id] ? 'Enviando...' : 'Publicar Agora'
                    ),
                    // Secondary actions row
                    React.createElement('div', { className: 'flex gap-2' },
                      React.createElement('button', {
                        onClick: () => openEditModal(post),
                        className: 'flex-1 flex items-center justify-center gap-1 bg-gray-700 hover:bg-gray-600 text-white text-xs font-semibold py-2 rounded-lg transition-colors'
                      },
                        React.createElement('span', null, '✏️'),
                        React.createElement('span', null, 'Editar')
                      ),
                      React.createElement('button', {
                        onClick: () => handleApprovePost(post.id),
                        className: 'flex-1 flex items-center justify-center gap-1 bg-green-700/70 hover:bg-green-600 text-white text-xs font-semibold py-2 rounded-lg transition-colors'
                      },
                        React.createElement('span', null, '✅'),
                        React.createElement('span', null, 'Aprovar')
                      ),
                      React.createElement('button', {
                        onClick: () => handleDeletePost(post.id),
                        title: 'Deletar',
                        className: 'flex items-center justify-center bg-red-700/60 hover:bg-red-600 text-white text-sm py-2 px-3 rounded-lg transition-colors'
                      }, '🗑️')
                    )
                  )
                )
              )
            )
          )
    )
  );
};