'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

const ResearchSearch = () => {
    const [query, setQuery] = useState('');
    const [activeFilter, setActiveFilter] = useState('Researchers');
    const filters = ['Researchers', 'Labs', 'Projects', 'Institutes'];
    const router = useRouter();

    const handleSearch = () => {
        const params = new URLSearchParams({ q: query, type: activeFilter });
        router.push(`/research/search?${params.toString()}`);
    };

    return (
        <div className="max-w-5xl mx-auto mb-10" style={{ padding: '0 1rem' }}>

            {/* Search bar */}
            <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i className="fa-solid fa-magnifying-glass" style={{ color: '#9ca3af' }}></i>
                </div>
                <input
                    type="text"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                    placeholder="Search across researchers, labs, projects, and disciplines..."
                    style={{
                        width: '100%',
                        paddingLeft: '3rem',
                        paddingRight: '8rem',
                        paddingTop: '1rem',
                        paddingBottom: '1rem',
                        backgroundColor: '#ffffff',
                        border: '1px solid #e5e7eb',
                        borderRadius: '1rem',
                        boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
                        fontSize: '1rem',
                        color: '#374151',
                        outline: 'none',
                        transition: 'border-color 0.2s, box-shadow 0.2s',
                        boxSizing: 'border-box',
                    }}
                    onFocus={(e) => {
                        e.target.style.borderColor = '#263c6f';
                        e.target.style.boxShadow = '0 0 0 2px rgba(38,60,111,0.15)';
                    }}
                    onBlur={(e) => {
                        e.target.style.borderColor = '#e5e7eb';
                        e.target.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.05)';
                    }}
                />
                <div className="absolute flex items-center" style={{ top: '0.5rem', bottom: '0.5rem', right: '0.5rem' }}>
                    <button
                        onClick={handleSearch}
                        style={{
                            backgroundColor: '#263c6f',
                            color: '#ffffff',
                            padding: '0.5rem 1.5rem',
                            borderRadius: '0.75rem',
                            fontSize: '0.875rem',
                            fontWeight: 500,
                            border: 'none',
                            cursor: 'pointer',
                            height: '100%',
                            transition: 'opacity 0.2s',
                        }}
                        onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.9')}
                        onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
                    >
                        Search
                    </button>
                </div>
            </div>

            {/* Filter pills */}
            <div className="flex gap-3 mt-4 px-2" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
                <span style={{ fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.25rem' }}>
                    Filters:
                </span>
                {filters.map((filter) => (
                    <button
                        key={filter}
                        onClick={() => setActiveFilter(filter)}
                        style={{
                            fontSize: '0.75rem',
                            fontWeight: 500,
                            padding: '0.25rem 0.75rem',
                            borderRadius: '9999px',
                            border: 'none',
                            cursor: 'pointer',
                            transition: 'background-color 0.2s',
                            backgroundColor: activeFilter === filter ? 'rgba(38,60,111,0.1)' : '#f3f4f6',
                            color: activeFilter === filter ? '#263c6f' : '#4b5563',
                        }}
                        onMouseEnter={(e) => {
                            if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#e5e7eb';
                        }}
                        onMouseLeave={(e) => {
                            if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#f3f4f6';
                        }}
                    >
                        {filter}
                    </button>
                ))}
            </div>

        </div>
    );
};

export default ResearchSearch;