frontend/components/SearchUsers.js

'use client';

import { useState, useRef } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import NexusAuthApi from '@lib/Nexus_Auth_API';

export default function UserSearch({ me }) {
    const [searchQuery, setSearchQuery] = useState('');
    const [filteredUsers, setFilteredUsers] = useState([]);
    const router = useRouter();
    const debounceTimeout = useRef(null);

    const handleSearchChange = (e) => {
        const query = e.target.value;
        setSearchQuery(query);

        if (debounceTimeout.current) {
            clearTimeout(debounceTimeout.current);
        }

        debounceTimeout.current = setTimeout(async () => {
            if (!query) {
                setFilteredUsers([]);
                return;
            }

            if (query.length > 2) {
                try {
                    const data = await NexusAuthApi.searchUsers(query);
                    setFilteredUsers(Array.isArray(data) ? data : []);
                } catch (error) {
                    console.error('Error fetching search results:', error);
                    setFilteredUsers([]);
                }
            } else {
                setFilteredUsers([]);
            }
        }, 500); // Debounce delay of 500ms
    };

    const handleUserSelect = (recipient) => {
        router.push(`/u/${recipient}`);
    };

    return (
        <div style={styles.container}>
            <input
                type="text"
                placeholder="Find People..."
                value={searchQuery}
                onChange={handleSearchChange}
                style={styles.searchInput}
            />

            {searchQuery && (
                <div
                    style={{
                        ...styles.searchResults,
                        height: filteredUsers.length ? '70dvh' : '200px',
                    }}
                >
                    {filteredUsers.length === 0 ? <h4 style={styles.searchResultsHeading}>Found Nothing</h4> : <h4 style={styles.searchResultsHeading}>Found</h4>}
                    <ul style={styles.userList}>
                        {Array.isArray(filteredUsers) &&
                            filteredUsers.map((recipient, index) => (
                                <li
                                    className="pulse-and-fade"
                                    key={index}
                                    style={styles.userItem}
                                    onClick={() => handleUserSelect(recipient)}
                                >
                                    <div style={styles.avatarContainer}>
                                        <Image
                                            src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
                                                recipient
                                            )}`}
                                            alt={`${recipient}'s avatar`}
                                            layout="fill"
                                            objectFit="cover"
                                            style={styles.avatar}
                                        />
                                    </div>
                                    <span style={styles.username}>
                                        {recipient} {recipient === me ? '(Me)' : ''}
                                    </span>
                                </li>
                            ))}
                    </ul>

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

const styles = {
    container: {
        backgroundColor: 'var(--background)',
        color: 'var(--foreground)',
        padding: '20px',
        borderRadius: '12px',
        boxShadow: '0px 6px 12px rgba(0, 0, 0, 0.2)',
        maxWidth: '600px',
        margin: 'auto',
        transition: 'all 0.5s ease',
    },
    searchInput: {
        width: '100%',
        padding: '12px',
        fontSize: '16px',
        borderRadius: '8px',
        border: '1px solid var(--hover-accent)',
        backgroundColor: 'var(--secondary)',
        color: 'var(--foreground)',
        marginBottom: '15px',
        boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)',
    },
    searchResults: {
        overflow: 'hidden',
        transition: 'height 0.3s ease',
        backgroundColor: 'var(--secondary)',
        borderRadius: '8px',
        padding: '10px',
        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
    },
    searchResultsHeading: {
        color: 'var(--foreground)',
        marginBottom: '10px',
        fontSize: '18px',
        fontWeight: 'bold',
    },
    userList: {
        listStyleType: 'none',
        padding: 0,
        maxHeight: '60dvh',
        overflowX: 'hidden',
        overflowY: 'auto',
    },
    userItem: {
        cursor: 'pointer',
        marginBottom: '15px',
        display: 'flex',
        alignItems: 'center',
        padding: '10px',
        borderRadius: '8px',
        backgroundColor: 'var(--hover-accent)',
        color: 'var(--foreground)',
        transition: 'background-color 0.3s',
    },
    avatarContainer: {
        width: '50px',
        height: '50px',
        position: 'relative',
        marginRight: '15px',
        borderRadius: '50%',
        overflow: 'hidden',
    },
    avatar: {
        borderRadius: '50%',
    },
    username: {
        fontSize: '16px',
        fontWeight: '500',
    },
    noResults: {
        color: 'var(--foreground-muted)',
        fontSize: '14px',
        textAlign: 'center',
        marginTop: '10px',
    },
    recentChatsContainer: {
        textAlign: 'center',
        color: 'var(--foreground-muted)',
        fontSize: '16px',
        padding: '20px',
    },
};