'use client';

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

const FILTERS = ['Researchers', 'Labs', 'Projects', 'Institutes'];

const ResearchSearchHeader = () => {
    const [query, setQuery] = useState('');
    const [activeFilter, setActiveFilter] = useState('Researchers');
    const router = useRouter();

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

    return (
        <section id="repo-header">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">

                {/* Title row */}
                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-8 w-full">
                    <div className="flex-1 max-w-3xl">
                        <h1>Research Search</h1>
                        <p>Search across researchers, labs, active projects, and institutes.</p>
                    </div>
                    <div className="flex gap-3 shrink-0">
                        <button className="pub-btn-outline" onClick={() => router.back()}>
                            <i className="fa-solid fa-arrow-left"></i>
                            Back to Research
                        </button>
                    </div>
                </div>

                {/* Search bar */}
                <div className="pub-search-bar">
                    <span className="pub-search-icon">
                        <i className="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <input
                        type="text"
                        placeholder="Search researchers, labs, projects, and disciplines..."
                        value={query}
                        onChange={(e) => setQuery(e.target.value)}
                        onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                    />
                    <div className="pub-search-btn-wrap">
                        <button className="pub-btn-primary" onClick={handleSearch}>Search</button>
                    </div>
                </div>

                {/* Filter tabs */}
                <div className="flex flex-wrap items-center gap-3 mt-5">
                    <span className="text-xs font-bold uppercase tracking-widest" style={{ color: 'var(--pub-muted)' }}>
                        Filter by:
                    </span>
                    {FILTERS.map((f) => (
                        <button
                            key={f}
                            onClick={() => setActiveFilter(f)}
                            className="pub-btn-outline"
                            style={activeFilter === f ? {
                                backgroundColor: 'var(--pub-blue-light)',
                                color: 'var(--pub-blue)',
                                borderColor: 'transparent',
                            } : {}}
                        >
                            {f}
                        </button>
                    ))}
                </div>

            </div>
        </section>
    );
};

export default ResearchSearchHeader;