"use client";

import { useState, useRef, useEffect } from "react";
import { search } from "@/lib/api";
import { Search, Hash, Lock, MessageSquare, FileText, User } from "lucide-react";

interface SearchResults {
  messages?: any[];
  channels?: any[];
  people?: any[];
  files?: any[];
}

export function SearchBar() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResults>({});
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const debounceRef = useRef<NodeJS.Timeout | null>(null);

  // Close dropdown on outside click
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Debounced search
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    if (!query.trim()) {
      setResults({});
      setIsOpen(false);
      return;
    }

    debounceRef.current = setTimeout(async () => {
      setIsLoading(true);
      try {
        const data = await search(query.trim());
        setResults(data || {});
        setIsOpen(true);
      } catch (err) {
        console.error("Search failed:", err);
        setResults({});
      } finally {
        setIsLoading(false);
      }
    }, 300);

    return () => {
      if (debounceRef.current) clearTimeout(debounceRef.current);
    };
  }, [query]);

  const hasResults =
    (results.messages && results.messages.length > 0) ||
    (results.channels && results.channels.length > 0) ||
    (results.people && results.people.length > 0) ||
    (results.files && results.files.length > 0);

  return (
    <div ref={containerRef} className="relative w-full max-w-md">
      <div className="relative">
        <Search
          size={16}
          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
        />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => query.trim() && hasResults && setIsOpen(true)}
          placeholder="Search messages, channels, people, files..."
          className="w-full pl-9 pr-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple focus:border-transparent text-sm bg-white"
        />
      </div>

      {/* Dropdown results */}
      {isOpen && (
        <div className="absolute top-full left-0 right-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 max-h-96 overflow-y-auto z-50">
          {isLoading && (
            <div className="px-4 py-3 text-sm text-gray-400 animate-pulse">Searching...</div>
          )}

          {!isLoading && !hasResults && (
            <div className="px-4 py-3 text-sm text-gray-400">No results found.</div>
          )}

          {!isLoading && hasResults && (
            <div className="py-2">
              {/* Messages */}
              {results.messages && results.messages.length > 0 && (
                <div className="px-2">
                  <div className="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">
                    Messages
                  </div>
                  {results.messages.slice(0, 5).map((msg: any, i: number) => (
                    <div
                      key={msg.id || i}
                      className="flex items-start gap-2 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                    >
                      <MessageSquare size={14} className="text-gray-400 mt-0.5 flex-shrink-0" />
                      <div className="min-w-0">
                        <p className="text-sm text-gray-800 truncate">
                          {msg.text || msg.content || ""}
                        </p>
                        <p className="text-xs text-gray-400">
                          {msg.user?.name || msg.user?.email || "Unknown"}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {/* Channels */}
              {results.channels && results.channels.length > 0 && (
                <div className="px-2 mt-2">
                  <div className="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">
                    Channels
                  </div>
                  {results.channels.slice(0, 5).map((ch: any, i: number) => (
                    <div
                      key={ch.id || i}
                      className="flex items-center gap-2 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                    >
                      {ch.is_private || ch.isPrivate ? (
                        <Lock size={14} className="text-gray-400 flex-shrink-0" />
                      ) : (
                        <Hash size={14} className="text-gray-400 flex-shrink-0" />
                      )}
                      <span className="text-sm text-gray-800 truncate">{ch.name}</span>
                    </div>
                  ))}
                </div>
              )}

              {/* People */}
              {results.people && results.people.length > 0 && (
                <div className="px-2 mt-2">
                  <div className="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">
                    People
                  </div>
                  {results.people.slice(0, 5).map((person: any, i: number) => (
                    <div
                      key={person.id || i}
                      className="flex items-center gap-2 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                    >
                      <div className="w-6 h-6 rounded-full bg-slack-purple text-white flex items-center justify-center text-xs font-bold flex-shrink-0">
                        {(person.name || person.email || "U")[0].toUpperCase()}
                      </div>
                      <div className="min-w-0">
                        <p className="text-sm text-gray-800 truncate">{person.name || "Unknown"}</p>
                        {person.email && (
                          <p className="text-xs text-gray-400 truncate">{person.email}</p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {/* Files */}
              {results.files && results.files.length > 0 && (
                <div className="px-2 mt-2">
                  <div className="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">
                    Files
                  </div>
                  {results.files.slice(0, 5).map((file: any, i: number) => (
                    <div
                      key={file.id || i}
                      className="flex items-center gap-2 px-2 py-2 hover:bg-gray-50 rounded-md cursor-pointer"
                    >
                      <FileText size={14} className="text-gray-400 flex-shrink-0" />
                      <span className="text-sm text-gray-800 truncate">
                        {file.name || file.filename || "File"}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}