import React, { useState } from 'react';

export default function SearchPanel({ onClose, onSearch }) {
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState('all');
  const [results, setResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);

  const filters = [
    { id: 'all', label: 'All', icon: '🔍' },
    { id: 'messages', label: 'Messages', icon: '💬' },
    { id: 'files', label: 'Files', icon: '📎' },
    { id: 'links', label: 'Links', icon: '🔗' },
    { id: 'images', label: 'Images', icon: '🖼️' },
    { id: 'mentions', label: 'Mentions', icon: '@' },
    { id: 'pinned', label: 'Pinned', icon: '📌' },
  ];

  const recentSearches = [
    'authentication update',
    'from: Anderson',
    'has: link',
    'in: general',
    'before: 2026-01-15',
  ];

  const mockResults = [
    {
      type: 'message',
      channel: '#general',
      author: 'Trevor',
      avatar: 'T',
      gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
      content: 'Just pushed the authentication updates...',
      timestamp: '10:34 AM',
      highlight: 'authentication',
    },
    {
      type: 'message',
      channel: '#api-discussion',
      author: 'Marcus',
      avatar: 'M',
      gradient: 'linear-gradient(135deg, #0066ff, #003380)',
      content: 'The new auth flow is working perfectly now',
      timestamp: 'Yesterday',
      highlight: 'auth',
    },
    {
      type: 'file',
      channel: '#development',
      author: 'Sarah',
      filename: 'auth-documentation.pdf',
      size: '2.4 MB',
      timestamp: 'Jan 15',
    },
  ];

  const handleSearch = (e) => {
    e.preventDefault();
    if (!query.trim()) return;
    setIsSearching(true);
    // Simulate search
    setTimeout(() => {
      setResults(mockResults);
      setIsSearching(false);
    }, 500);
  };

  return (
    <div className="search-panel">
      <div className="search-header">
        <form className="search-form" onSubmit={handleSearch}>
          <span className="search-icon">🔍</span>
          <input
            type="text"
            className="search-input"
            placeholder="Search messages, files, and more..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            autoFocus
          />
          {query && (
            <button type="button" className="clear-btn" onClick={() => setQuery('')}>
              ✕
            </button>
          )}
        </form>
        <button className="close-search" onClick={onClose}>✕</button>
      </div>

      <div className="search-filters">
        {filters.map(f => (
          <button
            key={f.id}
            className={`filter-btn ${filter === f.id ? 'active' : ''}`}
            onClick={() => setFilter(f.id)}
          >
            <span>{f.icon}</span>
            <span>{f.label}</span>
          </button>
        ))}
      </div>

      <div className="search-content">
        {!query && (
          <div className="search-suggestions">
            <h4>Recent Searches</h4>
            {recentSearches.map((search, idx) => (
              <div 
                key={idx} 
                className="recent-search"
                onClick={() => setQuery(search)}
              >
                <span className="history-icon">🕐</span>
                <span>{search}</span>
              </div>
            ))}
            
            <h4>Search Options</h4>
            <div className="search-options">
              <div className="option"><code>from:</code> user</div>
              <div className="option"><code>mentions:</code> user</div>
              <div className="option"><code>has:</code> link, embed, file</div>
              <div className="option"><code>before:</code> date</div>
              <div className="option"><code>after:</code> date</div>
              <div className="option"><code>in:</code> channel</div>
            </div>
          </div>
        )}

        {isSearching && (
          <div className="search-loading">
            <div className="spinner"></div>
            <span>Searching...</span>
          </div>
        )}

        {results.length > 0 && !isSearching && (
          <div className="search-results">
            <h4>{results.length} results found</h4>
            {results.map((result, idx) => (
              <div key={idx} className="search-result">
                {result.type === 'message' && (
                  <>
                    <div className="result-avatar" style={{ background: result.gradient }}>
                      {result.avatar}
                    </div>
                    <div className="result-content">
                      <div className="result-header">
                        <span className="result-author">{result.author}</span>
                        <span className="result-channel">{result.channel}</span>
                        <span className="result-time">{result.timestamp}</span>
                      </div>
                      <div className="result-text">{result.content}</div>
                    </div>
                  </>
                )}
                {result.type === 'file' && (
                  <>
                    <div className="result-icon">📄</div>
                    <div className="result-content">
                      <div className="result-filename">{result.filename}</div>
                      <div className="result-meta">
                        {result.size} • {result.channel} • {result.timestamp}
                      </div>
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
