'use client';

import { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';

interface Song {
    id: number;
    title: string;
    artist: string;
}

interface GuessInputProps {
    onGuess: (song: Song) => void;
    disabled: boolean;
}

export default function GuessInput({ onGuess, disabled }: GuessInputProps) {
    const t = useTranslations('Game');
    const [query, setQuery] = useState('');
    const [songs, setSongs] = useState<Song[]>([]);
    const [filteredSongs, setFilteredSongs] = useState<Song[]>([]);
    const [isOpen, setIsOpen] = useState(false);

    useEffect(() => {
        fetch('/api/songs')
            .then(res => res.json())
            .then(data => setSongs(data));
    }, []);

    useEffect(() => {
        if (query.length > 1) {
            const lower = query.toLowerCase();
            const filtered = songs.filter(s =>
                s.title.toLowerCase().includes(lower) ||
                s.artist.toLowerCase().includes(lower)
            );
            setFilteredSongs(filtered);
            setIsOpen(true);
        } else {
            setFilteredSongs([]);
            setIsOpen(false);
        }
    }, [query, songs]);

    const handleSelect = (song: Song) => {
        onGuess(song);
        setQuery('');
        setIsOpen(false);
    };

    return (
        <div className="input-container">
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                disabled={disabled}
                placeholder={disabled ? t('gameOverPlaceholder') : t('knowItSearch')}
                className="guess-input"
            />

            {isOpen && filteredSongs.length > 0 && (
                <ul className="suggestions-list">
                    {filteredSongs.map(song => (
                        <li
                            key={song.id}
                            onClick={() => handleSelect(song)}
                            className="suggestion-item"
                        >
                            <div className="suggestion-title">{song.title}</div>
                            <div className="suggestion-artist">{song.artist}</div>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}