/**
 * Search Results App - Search across all project content
 */

import React, { useState } from 'react';

export function SearchResults({ query }: { query?: string }) {
  const [searchQuery, setSearchQuery] = useState(query || '');
  const [results] = useState([
    { id: 1, type: 'Message', title: 'Design Direction', snippet: '...discuss the overall design direction for the homepage...', project: 'Website Redesign' },
    { id: 2, type: 'Todo', title: 'Design homepage mockup', snippet: '...Create high-fidelity mockups for the new homepage...', project: 'Website Redesign' },
    { id: 3, type: 'Document', title: 'Brand Guidelines', snippet: '...colors, typography, and logo usage for design...', project: 'Website Redesign' },
    { id: 4, type: 'Comment', title: 'Re: Design Direction', snippet: '...Looking great! Can we add more white space to the design?...', project: 'Website Redesign' },
  ]);

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'Message': return '#1d8cf8';
      case 'Todo': return '#00bf9a';
      case 'Document': return '#ff8d72';
      case 'Comment': return '#fd5d93';
      default: return '#999';
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Search</h1>
      
      <input 
        type="text" 
        value={searchQuery}
        onChange={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
        placeholder="Search projects, messages, todos, documents..." 
        style={{ 
          width: '100%', 
          padding: '12px 16px', 
          fontSize: '16px',
          borderRadius: '8px', 
          border: '1px solid #ddd',
          marginBottom: '30px'
        }}
      />

      <div style={{ marginBottom: '15px', color: '#666' }}>
        {results.length} results {searchQuery && `for "${searchQuery}"`}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {results.map(result => (
          <div key={result.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '8px', 
            padding: '16px', 
            background: 'white',
            cursor: 'pointer'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '8px' }}>
              <span style={{ 
                padding: '4px 10px', 
                background: getTypeColor(result.type), 
                color: 'white', 
                borderRadius: '4px', 
                fontSize: '12px',
                fontWeight: 'bold'
              }}>
                {result.type}
              </span>
              <span style={{ fontSize: '12px', color: '#999' }}>{result.project}</span>
            </div>
            <h3 style={{ fontSize: '16px', marginBottom: '8px', fontWeight: 'bold' }}>{result.title}</h3>
            <p style={{ color: '#666', margin: 0 }}>{result.snippet}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
