import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSearch } from '../hooks/useSearch';

export function SearchBar() {
  const [query, setQuery] = useState('');
  const [debounced, setDebounced] = useState('');
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(query), 300);
    return () => clearTimeout(id);
  }, [query]);

  const { data: results, isLoading } = useSearch(debounced);

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  const showResults = open && debounced.length >= 2;

  return (
    <div ref={ref} style={{ position: 'relative', width: 400, maxWidth: '100%' }}>
      <input
        type="text"
        placeholder="Поиск акций и облигаций..."
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setOpen(true);
        }}
        onFocus={() => setOpen(true)}
        style={{
          width: '100%',
          padding: '8px 12px',
          border: '1px solid #ccc',
          borderRadius: 6,
          fontSize: 14,
        }}
      />
      {showResults && (
        <ul
          style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            right: 0,
            background: '#fff',
            border: '1px solid #ddd',
            borderRadius: 6,
            marginTop: 4,
            padding: 0,
            listStyle: 'none',
            zIndex: 100,
            maxHeight: 360,
            overflowY: 'auto',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
          }}
        >
          {isLoading && <li style={{ padding: 12, color: '#888' }}>Загрузка...</li>}
          {!isLoading && results && results.length === 0 && (
            <li style={{ padding: 12, color: '#888' }}>Ничего не найдено</li>
          )}
          {!isLoading &&
            results?.map((item) => (
              <li
                key={item.secid}
                onClick={() => {
                  setOpen(false);
                  setQuery('');
                  navigate(
                    item.type === 'share' ? `/stocks/${item.secid}` : `/bonds/${item.secid}`,
                  );
                }}
                style={{
                  padding: '10px 12px',
                  cursor: 'pointer',
                  borderBottom: '1px solid #f0f0f0',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
                onMouseEnter={(e) => (e.currentTarget.style.background = '#f5f5f5')}
                onMouseLeave={(e) => (e.currentTarget.style.background = '')}
              >
                <span>
                  <strong>{item.shortName}</strong>
                  <span style={{ marginLeft: 8, color: '#888', fontSize: 12 }}>{item.secid}</span>
                </span>
                <span
                  style={{ fontSize: 12, color: item.type === 'share' ? '#1976d2' : '#2e7d32' }}
                >
                  {item.type === 'share' ? 'Акция' : 'Облигация'}
                </span>
              </li>
            ))}
        </ul>
      )}
    </div>
  );
}