"use client";

import React, { useState, useEffect, useRef } from 'react';
import { Search, X, Mic } from 'lucide-react';

interface SearchbarProps {
    isOpen: boolean;
    onClose: () => void;
}

const Searchbar: React.FC<SearchbarProps> = ({ isOpen, onClose }) => {
    const [query, setQuery] = useState('');
    const inputRef = useRef<HTMLInputElement>(null);

    // Effect to focus the input and handle the ESC key to close
    useEffect(() => {
        if (isOpen) {
            inputRef.current?.focus();

            const handleEscape = (event: KeyboardEvent) => {
                if (event.key === 'Escape') {
                    onClose();
                }
            };

            document.addEventListener('keydown', handleEscape);
            return () => {
                document.removeEventListener('keydown', handleEscape);
            };
        }
    }, [isOpen, onClose]);

    if (!isOpen) {
        return null;
    }

    // Handle form submission (you would integrate search API logic here)
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('Searching for:', query);
        // Add actual search logic here
        onClose(); // Close the modal after search
    };

    // Function to handle mic click (placeholder for voice search)
    const handleMicClick = () => {
        console.log('Voice search activated!');
        // Implement voice recognition logic here
    };

    return (
        // Full-screen overlay background
        <div className="fixed inset-0 z-[200] flex items-start justify-center p-4 sm:p-10 transition-opacity duration-300 bg-black/95 backdrop-blur-sm"
            style={{ backgroundColor: 'rgba(2, 0, 36, 0.95)' }}
        >
            <div className="w-full max-w-4xl mt-24">

                {/* Close Button (Top Right) */}
                <button
                    onClick={onClose}
                    className="absolute top-6 right-6 p-2 text-white hover:text-indigo-400 transition-colors"
                    aria-label="Close search"
                >
                    <X size={32} />
                </button>

                {/* Search Input Form */}
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="relative border-b border-white/80 focus-within:border-indigo-400 transition-colors">
                        <input
                            ref={inputRef}
                            type="search"
                            value={query}
                            onChange={(e) => setQuery(e.target.value)}
                            placeholder="Start typing..."
                            className="w-full bg-transparent text-white text-5xl font-light placeholder-white/40 focus:outline-none pb-2 pr-16" // <-- Adjusted pr for only ONE icon
                        />

                        {/* Container for the remaining single icon (Mic) */}
                        <div className="absolute right-0 top-1/2 transform -translate-y-1/2">

                            {/* Mic Icon (Voice Search) */}
                            <button
                                type="button"
                                onClick={handleMicClick}
                                className="p-2 rounded-full text-white/50 hover:text-indigo-400 transition-colors"
                                aria-label="Activate voice search"
                            >
                                <Mic size={32} />
                            </button>
                        </div>
                    </div>

                    {/* Hint Text */}
                    <p className="text-sm text-white/50 text-right mt-2">
                        Hit enter to search or ESC to close
                    </p>
                </form>
            </div>
        </div>
    );
};

export default Searchbar;