var Search = function (props) {
  var open = props.open;
  var onClose = props.onClose;
  var navigate = props.navigate;

  var _query = React.useState('');
  var query = _query[0], setQuery = _query[1];

  var _results = React.useState([]);
  var results = _results[0], setResults = _results[1];

  var _loading = React.useState(false);
  var loading = _loading[0], setLoading = _loading[1];

  var _searched = React.useState(false);
  var searched = _searched[0], setSearched = _searched[1];

  var _hoveredIdx = React.useState(-1);
  var hoveredIdx = _hoveredIdx[0], setHoveredIdx = _hoveredIdx[1];

  var inputRef = React.useRef(null);

  React.useEffect(function () {
    if (open && inputRef.current) {
      inputRef.current.focus();
    }
    if (!open) {
      setQuery('');
      setResults([]);
      setSearched(false);
      setLoading(false);
    }
  }, [open]);

  React.useEffect(function () {
    if (!query.trim()) {
      setResults([]);
      setSearched(false);
      setLoading(false);
      return;
    }
    setLoading(true);
    var timer = setTimeout(function () {
      var ghost = window.IBA_GHOST;
      if (!ghost) {
        setLoading(false);
        return;
      }
      ghost.searchPosts(query.trim()).then(function (data) {
        setResults((data.posts || []).slice(0, 10));
        setSearched(true);
        setLoading(false);
      }).catch(function () {
        setResults([]);
        setSearched(true);
        setLoading(false);
      });
    }, 300);
    return function () { clearTimeout(timer); };
  }, [query]);

  React.useEffect(function () {
    if (!open) return;
    var handleKey = function (e) {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleKey);
    return function () { document.removeEventListener('keydown', handleKey); };
  }, [open]);

  if (!open) return null;

  var handleBackdropClick = function (e) {
    if (e.target === e.currentTarget) onClose();
  };

  var handleResultClick = function (post) {
    return function () {
      navigate('blog/' + post.slug);
      onClose();
    };
  };

  var formatDate = function (dateStr) {
    var d = new Date(dateStr);
    var months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
    return months[d.getMonth()] + ' ' + String(d.getDate()).padStart(2, '0');
  };

  var backdropStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'rgba(0, 0, 0, 0.75)',
    zIndex: 9000,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
    animation: 'searchFadeIn 0.2s ease-out'
  };

  var panelStyle = {
    width: '100%',
    maxWidth: '640px',
    marginTop: '15vh',
    padding: '24px',
    animation: 'searchSlideIn 0.2s ease-out'
  };

  var inputWrapStyle = {
    display: 'flex',
    alignItems: 'center',
    borderBottom: '1px solid var(--amber)',
    paddingBottom: '8px',
    marginBottom: '16px'
  };

  var promptStyle = {
    fontFamily: 'var(--font-mono)',
    fontSize: '16px',
    color: 'var(--amber)',
    marginRight: '8px',
    userSelect: 'none'
  };

  var inputStyle = {
    flex: 1,
    background: 'transparent',
    border: 'none',
    outline: 'none',
    fontFamily: 'var(--font-mono)',
    fontSize: '16px',
    color: 'var(--text)',
    caretColor: 'var(--amber)'
  };

  var resultRowStyle = function (isHovered) {
    return {
      display: 'flex',
      alignItems: 'center',
      gap: '16px',
      padding: '10px 12px',
      cursor: 'pointer',
      borderLeft: isHovered ? '2px solid var(--amber)' : '2px solid transparent',
      transition: 'border-color 0.15s ease'
    };
  };

  var titleStyle = {
    flex: 1,
    fontFamily: 'var(--font-display)',
    fontSize: '15px',
    color: 'var(--text)',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  };

  var tagStyle = {
    fontFamily: 'var(--font-mono)',
    fontSize: '11px',
    color: 'var(--amber-dim)',
    textTransform: 'uppercase',
    flexShrink: 0
  };

  var dateStyle = {
    fontFamily: 'var(--font-mono)',
    fontSize: '11px',
    color: 'var(--text-muted)',
    flexShrink: 0
  };

  var statusStyle = {
    padding: '24px 12px',
    fontFamily: 'var(--font-mono)',
    fontSize: '13px',
    color: 'var(--text-muted)'
  };

  var content = null;
  if (loading) {
    content = React.createElement('div', { style: statusStyle },
      React.createElement('span', { style: { color: 'var(--amber-dim)' } }, '$ '),
      'searching...'
    );
  } else if (searched && results.length === 0) {
    content = React.createElement('div', { style: statusStyle },
      React.createElement('span', { style: { color: 'var(--amber-dim)' } }, '$ '),
      'no results'
    );
  } else if (results.length > 0) {
    content = React.createElement('div', { style: { marginTop: '8px' } },
      results.map(function (post, i) {
        var tag = post.primary_tag ? post.primary_tag.name : '';
        return React.createElement('div', {
          key: post.id || i,
          style: resultRowStyle(hoveredIdx === i),
          onClick: handleResultClick(post),
          onMouseEnter: function () { setHoveredIdx(i); },
          onMouseLeave: function () { setHoveredIdx(-1); }
        },
          React.createElement('span', { style: titleStyle }, post.title),
          tag && React.createElement('span', { style: tagStyle }, tag),
          post.published_at && React.createElement('span', { style: dateStyle }, formatDate(post.published_at))
        );
      })
    );
  }

  var overlay = React.createElement('div', { style: backdropStyle, onClick: handleBackdropClick },
    React.createElement('div', { style: panelStyle },
      React.createElement('div', { style: inputWrapStyle },
        React.createElement('span', { style: promptStyle }, '$ '),
        React.createElement('input', {
          ref: inputRef,
          type: 'text',
          placeholder: 'search posts...',
          value: query,
          onChange: function (e) { setQuery(e.target.value); },
          style: inputStyle
        })
      ),
      content
    )
  );

  return ReactDOM.createPortal(overlay, document.getElementById('overlays'));
};

window.Search = Search;