import React, { useState } from 'react';

// 🔍 Local Vector Search Visualizer

export default function LocalVectorDemo() {
    const [query, setQuery] = useState("");
    const [results, setResults] = useState([]);
    const [latency, setLatency] = useState(0);

    // Mock Data
    const docs = Array.from({ length: 100 }, (_, i) => ({
        id: i,
        title: `Document #${i}`,
        text: i % 2 === 0 ? "React Server Components are cool" : "Vector databases are fast"
    }));

    const handleSearch = (text) => {
        setQuery(text);
        if (!text) {
            setResults([]); 
            setLatency(0);
            return;
        }

        const start = performance.now();
        // Simulate "Vector" Search algorithm locally (filtering + ranking)
        const matches = docs.filter(d => d.text.toLowerCase().includes(text.toLowerCase()) || d.title.toLowerCase().includes(text.toLowerCase()));
        const end = performance.now();
        
        setLatency((end - start).toFixed(2));
        setResults(matches.slice(0, 5));
    };

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl h-[500px] flex flex-col">
             <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-black text-gray-900 dark:text-white flex items-center gap-3">
                    <span className="text-teal-500">🔍</span> Client-Side Database
                </h3>
            </div>

            <div className="flex gap-8 h-full">
                
                {/* Search Area */}
                <div className="flex-1 flex flex-col gap-4">
                    <div className="relative">
                        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">🔍</span>
                        <input 
                            value={query}
                            onChange={e => handleSearch(e.target.value)}
                            placeholder="Search local index..."
                            className="w-full pl-12 p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 focus:ring-2 focus:ring-teal-500 outline-none"
                        />
                         <div className="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-mono text-green-500">
                             {latency > 0 && `${latency}ms`}
                        </div>
                    </div>

                    <div className="flex-1 overflow-y-auto space-y-2">
                        {results.map(r => (
                            <div key={r.id} className="p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm animate-in slide-in-from-bottom-2">
                                <div className="font-bold text-gray-800 dark:text-white">{r.title}</div>
                                <div className="text-sm text-gray-500">{r.text}</div>
                            </div>
                        ))}
                        {query && results.length === 0 && <div className="text-center text-gray-400 mt-10">No matches found locally.</div>}
                    </div>
                </div>

                {/* Architecture Viz */}
                <div className="w-1/3 bg-slate-200 dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-xl p-6 flex flex-col items-center justify-center gap-6">
                    
                    <div className="text-center max-w-[150px]">
                        <div className="flex gap-1 justify-center mb-2">
                            {[1,2,3].map(i => <div key={i} className="w-2 h-8 bg-teal-500 rounded-full animate-pulse" style={{ animationDelay: `${i*100}ms` }}></div>)}
                        </div>
                        <div className="font-bold text-teal-700 dark:text-teal-400">In-Memory Index</div>
                        <div className="text-xs text-gray-500">Running in Thread</div>
                    </div>

                    <div className="w-full h-px bg-gray-400 dark:bg-slate-700"></div>

                    <div className="flex items-center gap-3 opacity-50">
                        <span className="text-2xl">💾</span>
                        <div className="text-xs">IndexedDB (Persisted)</div>
                    </div>

                </div>

            </div>
        </div>
    );
}