"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { search } from "@/lib/api";
import { Message } from "@/lib/api";
import { LogOut, Settings, ArrowLeft, Search, Hash, MessageSquare, User, FileText, Loader2 } from "lucide-react";

interface SearchResult {
  type: string;
  id: string;
  text?: string;
  content?: string;
  channel_name?: string;
  channelName?: string;
  user?: { id: string; name?: string; email?: string };
  name?: string;
  email?: string;
  created_at?: string;
  createdAt?: string;
}

export default function SearchPageWrapper() {
  return (
    <Suspense
      fallback={
        <div className="flex h-screen items-center justify-center bg-white">
          <Loader2 size={24} className="animate-pulse text-gray-400" />
        </div>
      }
    >
      <SearchPage />
    </Suspense>
  );
}

function SearchPage() {
  const { isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get("q") || "";
  const [query, setQuery] = useState(initialQuery);
  const [activeQuery, setActiveQuery] = useState(initialQuery);
  const [results, setResults] = useState<{
    messages?: SearchResult[];
    channels?: SearchResult[];
    users?: SearchResult[];
    files?: SearchResult[];
  }>({});
  const [loadingResults, setLoadingResults] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!loading && !isAuthenticated) {
      router.replace("/login");
    }
  }, [loading, isAuthenticated, router]);

  useEffect(() => {
    if (initialQuery) {
      performSearch(initialQuery);
    }
  }, [initialQuery]); // eslint-disable-line react-hooks/exhaustive-deps

  const performSearch = (q: string) => {
    if (!q.trim()) {
      setResults({});
      return;
    }
    setLoadingResults(true);
    setError("");
    setActiveQuery(q);
    search(q.trim())
      .then((data) => {
        setResults({
          messages: data.messages || [],
          channels: data.channels || [],
          users: data.users || [],
          files: data.files || [],
        });
      })
      .catch((err) => {
        console.error("Search failed:", err);
        setError("Search failed. Please try again.");
      })
      .finally(() => setLoadingResults(false));
  };

  if (loading || (!isAuthenticated && !loading)) {
    return (
      <div className="flex h-screen items-center justify-center bg-slack-darkpurple">
        <div className="text-white text-lg animate-pulse">Loading ChatApp...</div>
      </div>
    );
  }

  const totalResults =
    (results.messages?.length || 0) +
    (results.channels?.length || 0) +
    (results.users?.length || 0) +
    (results.files?.length || 0);

  return (
    <div className="flex h-screen bg-white">
      {/* Far left: workspace sidebar */}
      <div className="w-[60px] bg-slack-purple flex flex-col items-center py-4 gap-3">
        <div className="w-10 h-10 rounded-md bg-white text-slack-purple flex items-center justify-center font-bold text-lg">
          CA
        </div>
        <button
          onClick={() => router.push("/chat")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Back to chat"
        >
          <ArrowLeft size={20} />
        </button>
        <button
          onClick={() => router.push("/settings")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Settings"
        >
          <Settings size={20} />
        </button>
        <button
          onClick={logout}
          className="mt-auto w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Sign out"
        >
          <LogOut size={20} />
        </button>
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Search bar */}
        <div className="border-b border-gray-200 p-4">
          <div className="flex items-center gap-2 mb-3">
            <Search size={22} className="text-slack-purple" />
            <h1 className="text-lg font-bold text-gray-800">Search</h1>
            {activeQuery && (
              <span className="text-sm text-gray-400">
                {totalResults} result(s) for &ldquo;{activeQuery}&rdquo;
              </span>
            )}
          </div>
          <div className="relative">
            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") performSearch(query);
              }}
              placeholder="Search messages, channels, people, files..."
              className="w-full pl-9 pr-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
              autoFocus
            />
          </div>
        </div>

        {/* Results */}
        <div className="flex-1 overflow-y-auto p-4 max-w-4xl">
          {loadingResults ? (
            <div className="flex items-center justify-center text-gray-400 py-12">
              <Loader2 size={24} className="animate-pulse" />
            </div>
          ) : error ? (
            <div className="text-slack-red text-sm py-12 text-center">{error}</div>
          ) : !activeQuery ? (
            <div className="flex flex-col items-center justify-center py-16 text-gray-400">
              <Search size={48} className="mb-3 opacity-50" />
              <p className="text-sm">Start typing to search across your workspace.</p>
            </div>
          ) : totalResults === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-gray-400">
              <Search size={48} className="mb-3 opacity-50" />
              <p className="text-sm">No results found for &ldquo;{activeQuery}&rdquo;.</p>
            </div>
          ) : (
            <div className="space-y-6">
              {/* Channels */}
              {results.channels && results.channels.length > 0 && (
                <section>
                  <h2 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                    <Hash size={14} className="text-slack-purple" />
                    Channels ({results.channels.length})
                  </h2>
                  <div className="space-y-2">
                    {results.channels.map((ch) => (
                      <div
                        key={ch.id}
                        className="p-3 rounded-lg border border-gray-200 hover:border-slack-purple/30 transition-colors cursor-pointer"
                        onClick={() => router.push("/chat")}
                      >
                        <div className="flex items-center gap-2">
                          <Hash size={14} className="text-gray-400" />
                          <span className="font-medium text-gray-700">{ch.name || ch.channel_name}</span>
                        </div>
                        {ch.text && (
                          <p className="text-xs text-gray-400 mt-1 line-clamp-1">{ch.text}</p>
                        )}
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Messages */}
              {results.messages && results.messages.length > 0 && (
                <section>
                  <h2 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                    <MessageSquare size={14} className="text-slack-purple" />
                    Messages ({results.messages.length})
                  </h2>
                  <div className="space-y-2">
                    {results.messages.map((msg) => (
                      <div
                        key={msg.id}
                        className="p-3 rounded-lg border border-gray-200 hover:border-slack-purple/30 transition-colors"
                      >
                        <div className="flex items-center gap-2 text-xs text-gray-400 mb-1">
                          {msg.channel_name && (
                            <span className="inline-flex items-center gap-0.5 bg-gray-100 px-2 py-0.5 rounded">
                              <Hash size={10} />
                              {msg.channel_name}
                            </span>
                          )}
                          {msg.user?.name && <span>{msg.user.name}</span>}
                          {msg.created_at && (
                            <span>{new Date(msg.created_at).toLocaleDateString()}</span>
                          )}
                        </div>
                        <p className="text-sm text-gray-700 break-words line-clamp-3">
                          {msg.text || msg.content || ""}
                        </p>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Users */}
              {results.users && results.users.length > 0 && (
                <section>
                  <h2 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                    <User size={14} className="text-slack-purple" />
                    People ({results.users.length})
                  </h2>
                  <div className="space-y-2">
                    {results.users.map((u) => (
                      <div
                        key={u.id}
                        className="p-3 rounded-lg border border-gray-200 hover:border-slack-purple/30 transition-colors flex items-center gap-3"
                      >
                        <div className="w-8 h-8 rounded-full bg-slack-purple text-white flex items-center justify-center text-xs font-bold">
                          {(u.name || u.email || "U")[0].toUpperCase()}
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-700">{u.name || "Unknown"}</p>
                          {u.email && <p className="text-xs text-gray-400">{u.email}</p>}
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Files */}
              {results.files && results.files.length > 0 && (
                <section>
                  <h2 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                    <FileText size={14} className="text-slack-purple" />
                    Files ({results.files.length})
                  </h2>
                  <div className="space-y-2">
                    {results.files.map((f) => (
                      <div
                        key={f.id}
                        className="p-3 rounded-lg border border-gray-200 hover:border-slack-purple/30 transition-colors"
                      >
                        <div className="flex items-center gap-2">
                          <FileText size={16} className="text-gray-400" />
                          <span className="text-sm font-medium text-gray-700">{f.name || f.text || "File"}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}