import React, { useState } from 'react';

export default function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchType, setSearchType] = useState('tasks');

  const performSearch = async () => {
    if (!query) return;
    setLoading(true);
    try {
      const toolName = searchType === 'tasks' ? 'wrike_list_tasks' : 'wrike_list_folders';
      const result = await window.mcp.callTool(toolName, { title: query });
      setResults(result[searchType] || result.folders || []);
    } catch (error) {
      console.error('Failed to search:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Search Results</h1>
      
      <div style={{ marginBottom: '24px' }}>
        <div style={{ display: 'flex', gap: '12px', marginBottom: '12px' }}>
          <input
            type="text"
            placeholder="Search..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && performSearch()}
            style={{
              flex: 1,
              background: '#1f2937',
              color: '#f3f4f6',
              padding: '12px 16px',
              borderRadius: '6px',
              border: '1px solid #374151',
              fontSize: '16px',
            }}
          />
          <button
            onClick={performSearch}
            style={{
              background: '#3b82f6',
              color: 'white',
              padding: '12px 24px',
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
            }}
          >
            Search
          </button>
        </div>
        <div style={{ display: 'flex', gap: '12px' }}>
          <button
            onClick={() => setSearchType('tasks')}
            style={{
              background: searchType === 'tasks' ? '#3b82f6' : '#1f2937',
              color: 'white',
              padding: '6px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
              cursor: 'pointer',
            }}
          >
            Tasks
          </button>
          <button
            onClick={() => setSearchType('folders')}
            style={{
              background: searchType === 'folders' ? '#3b82f6' : '#1f2937',
              color: 'white',
              padding: '6px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
              cursor: 'pointer',
            }}
          >
            Folders
          </button>
        </div>
      </div>

      {loading ? (
        <div>Searching...</div>
      ) : (
        <div>
          <div style={{ marginBottom: '16px', color: '#9ca3af' }}>
            {results.length} results found
          </div>
          <div style={{ display: 'grid', gap: '12px' }}>
            {results.map(item => (
              <div
                key={item.id}
                style={{
                  background: '#1f2937',
                  padding: '16px',
                  borderRadius: '8px',
                  border: '1px solid #374151',
                }}
              >
                <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
                  {item.title}
                </h3>
                {item.description && (
                  <div style={{ fontSize: '14px', color: '#9ca3af' }}>{item.description}</div>
                )}
                <div style={{ fontSize: '12px', color: '#9ca3af', marginTop: '8px' }}>
                  {item.status || 'Folder'} • Updated {new Date(item.updatedDate).toLocaleDateString()}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
